[Løst] CSS: Container ekspanderer seg ikke med float-divs

[oya]

Hei!

 

Holder på med en side, og har støtt på et problem. Jeg har prøvd å søkt litt rundt omkring, men finner ikke nå konkret løsning. Jeg har en container (div) som jeg skal plassere en del elementer i (div), disse vil jeg skal ha Float:left. Problemet er at containeren ikke ekspanderer seg etter disse i firefox (I IE gikk det greit å ta height: 100%).

 

Et bilde for å illustrere:

 

Endret 5. februar 2009 av oya

[JohndoeMAKT]

Semantisk litt i gråsonen, men det enkleste teknisk sett er ett clearer-element.

 

<div id="parent">

<div class="floater"></div>

<div class="floater"></div>

<div class="floater"></div>

<div class="clearer"></div>

</div>

 

.clearer {

clear:both;

}

Endret 1. februar 2009 av JohndoeMAKT

[Asterisk]

Skriv inn denne div'en etter siste div-element, hvor du bruker float:

<div style="clear:both"></div>

 

Denne koden skriver du direkte i html-dokumentet, før du avslutter containeren.

 

Da kan du endre height: 100%, og bruke denne koden i containeren:

height: auto !important;

min-height: 100px;

height: 100px;

 

Endre høyden etter behov (husk å endre begge steder). Containeren vil utvide seg etterhvert som inneholdet vokser.

[oya]

Det funket forsåvidt fint, men det kom opp et nytt problem i IE: Teksten øverst der blir borte, og dukker kun opp når jeg merker den (kun det som blir merket dukker opp)

 

 

 

Altså, noe sånt:

 

<div id="parent">

<p>Teksten</p>

<div class="floater"></div>

<div class="floater"></div>

<div class="floater"></div>

<div class="clearer"></div>

</div>

 

<div id="parent">

<div>Teksten vistes ikke slik heller</div>

<div class="floater"></div>

<div class="floater"></div>

<div class="floater"></div>

<div class="clearer"></div>

</div>

[JohndoeMAKT]

Gi oss en link, så kan vi kikke på den i Firebug og bruke fire sekunder på å se feilen.

[oya]

Hmmm. Det er inni et innloggingssystem jeg har laget, så skal fikse en prøveside senere idag...

[oya]

Rakk å fikse det: http://cpanel17.proisp.no/~tfwebbns/test/index.php?side=test

 

Funker fint i Firefox, men i IE kommer ikke teksten opp, med mindre jeg merker den...

[JohndoeMAKT]

Jeg vet ikke om du har fått fikset det siden i dag, men her er et screenshot hos meg i Firefox 2 (oppe venstre), Opera 9.63 (oppe høyre), IE6 og IE7, og jeg regner med at det er teksten som starter med "Oversikt" du hadde problemer med.

[oya]

Har ikke fått fikset det. Er teksten ja: "Oversikt over alle brukerne..."

[oya]

Og det er i maksimert modus vel og merke. Teksten vises når vinduet ikke er maksimert, men med en gang det maksimeres, så forsvinner teksten...

[ButterScotch]

Det er en IE bug. Har kommet borti den selv hvor jeg hadde en float: left-meny ved siden av innholdet, og hvis innholdet var kortere enn menyen, så forsvant hele greia, til jeg merket teksten.

 

Hvis noen har en fornuftig løsning her så er jeg også interessert =)

 

EDIT: http://www.positioniseverything.net/explorer/peekaboo.html

 

Dette samsvarer eksakt med mitt tilfelle. Og siden ditt tilfelle startet når clear-div ble lagt til, så er det sikkert relevant.

Endret 5. februar 2009 av jorgenys

[oya]

Haha, dødsbra. Fikset biffen. Både den "Containeren" og "Boksene" fikk position: relative;

Det fikset det hele. Takk for hjelpen