Ergebnis 1 bis 7 von 7

Thema: Mal wieder ein Float-Problem

  1. #1
    Azubi(ne)
    Registriert seit
    22.01.2007
    Beiträge
    74
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Mal wieder ein Float-Problem

    Hallo allerseits,

    ich habe bei mir auf einer Seite mehrere div-Container untereinander. In dem Div-Container können Bilder sein, um die per float:left dann Text fließen soll. Außerdem haben die Bilder eine maximale Höhe und Breite. Ist der Text nun aber kürzer als das Bild, fließt das Bild praktisch aus dem div-Container hinaus. Kann mir jemand sagen, wie ich den div-Container so auf die Höhe strecke, dass der auf jeden Fall so hoch wie das Bild ist?
    Vielleicht hilft ja der Code etwas:
    Die div-Container:
    HTML-Code:
    <div class='c'>
       <img src='pics/pic1.jpg' alt='Pic' />
       <h2>bla</h2>
       <p>blablabla</p> 
    </div> 
    <div class='c'>
       <img src='pics/pic2.jpg' alt='Pic' />
       <h2>Blubb</h2>
       <p>blubbblubbblubb</p> 
    </div>
    Das CSS dazu:
    HTML-Code:
    div.c{
        clear: left;
        margin-top: 20px;
        height: 100%;
        border-top: 1px rgb(153,204,255) solid;
        border-left: 2px rgb(153,204,255) solid;
        text-align: left;
        line-height: 1.5em;
        
    }
    
    div.c img{
        max-width: 300px;
        max-height: 300px;
        float: left;
        margin: 5px;
    }
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    26.07.2004
    Ort
    Server 2 von 3
    Alter
    27
    Beiträge
    2.512
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Mal wieder ein Float-Problem

    Kannst du mal was komplettes hochladen, wo auch die bilder drinn sind?
    Ich würde dir ja helfen, hab aber keine Lust mir das jetzt selbst nachzubauen.

    Davon, dass deine Bilder eine feste Größe haben, sieht man nichts.
    Zumindest ist in deinem HTML Code keine Größe angegeben

    Gruß
    Lukas
    Maybe this world is another planet's hell

  3. #3
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Mal wieder ein Float-Problem

    Bevor du den Div schließt, welcher die gefloateten Elemente beinhaltet musst du entweder clearen, oder dem umfassenden Div ein
    Code:
    overflow: auto;
    zuweisen.
    Siehe http://www.ohne-css.gehts-gar.net/0042.php

  4. #4
    Meister(in)
    Registriert seit
    10.01.2008
    Ort
    Passau/Ösiland
    Beiträge
    267
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Mal wieder ein Float-Problem

    Hi,

    Zitat Zitat von sejuma Beitrag anzeigen
    Bevor du den Div schließt, welcher die gefloateten Elemente beinhaltet musst du entweder clearen, oder dem umfassenden Div ein
    Code:
    overflow: auto;
    zuweisen.
    Siehe http://www.ohne-css.gehts-gar.net/0042.php
    die overflow-Methode zum Einschließen von Floats ist verblüffend einfach und wie sich in den letzten Jahren herausstellte verblüffend ungeeignet, da sie älteren Geckos viele Probleme bereitet.

    Wenn man denn ein leeres div zum clearen nutzt, sollte man zumindest ein geschütztes Leerzeichen hineinsetzen:
    Code:
    <div class="clear">&nbsp;</div>
    Ohne dieses Leerezeichen können mit älteren Browsern ebenfalls Probleme auftreten, weil dann das komplette div gern mal ignoriert wird.

  5. #5
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Mal wieder ein Float-Problem

    Gibt es denn eine Übersicht, in welchen Browserversionen das overflow nicht funktioniert? Hab's bisher leider nur im FF3 und IE7 getestet.

  6. #6
    Meister(in)
    Registriert seit
    10.01.2008
    Ort
    Passau/Ösiland
    Beiträge
    267
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Mal wieder ein Float-Problem

    Moin,

    Zitat Zitat von sejuma Beitrag anzeigen
    Gibt es denn eine Übersicht, in welchen Browserversionen das overflow nicht funktioniert? Hab's bisher leider nur im FF3 und IE7 getestet.
    funktionieren auf eine Art und Weise schon, allerdings zieht das eine Menge Probleme nach sich.
    Erstmal sollte man immer bedenken das durch die overflow-Eigenschaft ein "Block Formatting Context" (BFC) generiert wird.

    Nimm z.B. ein scheinbar einfachen Fall wo ein Float einen linken inneren Float und daneben einen overflow:hidden-Block enthält.
    Wenn dieser Block einen linken margin enthält, wo kommt dieser margin zum Liegen?

    Beim IE6, IE7, FF3 verschwindet der margin hinter dem Float.
    FF 2.0.0.14 und Opera 9.5 machen eine margin-Lücke zwischen Float und BFC.
    Opera 9.24 und Safari 3.1.2 machen die Lücke rechts vom BFC.

    Laut Spezifikation muss der margin hinter dem Float verschwinden.
    Es ist nicht definiert ob nun der BFC neben dem Float zum Liegen kommen soll oder unter den Float rutschen kann.
    Es ist sogar gestattet den BFC in der Breite zu kürzen, damit er neben den Float paßt, aber es wird nicht definiert wie das zu geschehen hat.

    Solange sich die Spezifikation nicht genauer ausdrückt und die Browserhersteller ihre Probleme mit der overflow-Eigenschaft haben, sollte man diese nur mit viel Bedacht wählen.

    Einen guten Einblick und somit eigentlich ein "Must-Have" für den fortgeschrittenen CSS-Anwender bietet, wie ich schon mal erwähnte, "Friccas" und "IChaos" Buch: Fortgeschrittene CSS-Techniken

  7. #7
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Mal wieder ein Float-Problem

    Vielen Dank für deine ausführlichen Infos.
    Werd ich mir mal näher ansehen.

Ähnliche Themen

  1. CSS: float:left; und overflow:auto; IE6 und kleiner==Problem
    Von LinuxMan im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 19.07.2008, 20:00
  2. wieder mal ein Problem!DRINGEND!
    Von gast30600 im Forum Computer - Internet Forum
    Antworten: 6
    Letzter Beitrag: 03.02.2007, 18:40
  3. Problem mit position und float
    Von kwurzel im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 26.02.2006, 18:49
  4. mal wieder linux problem
    Von cookie im Forum Computer - Internet Forum
    Antworten: 2
    Letzter Beitrag: 26.11.2005, 18:07
  5. css problem float
    Von pt-3000 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 21.07.2005, 16:06

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •