Problem med divs html/css

Tags:    html css

Hej,

Har sat det sådan her op:

<div id="header">
</div>
<div id="main_content">
<div id="boks1"> -- "floater mod left"
</div>
<div id="boks2"> -- "floater mod left"
</div>
<div id="boks3"> -- "floater mod left"
</div>
</div>
- Når jeg prøver at tilføje noget her så går det galt, og det flytter sig op til starten af main_content boksen. Tror måske det er fordi boks 1,2,3 ikke har samme højde, men main_content boksen burder jo rette højde efter den af boksene der er højest, og så burde man vel kunne fortsætte med at tilføje divs nedenunder?

Har prøvet at bruge clear: left/both, og så flyter div boksen sig godtnok neden under, men jeg kan ikke bruge margin-top på div boksen? Jeg kan godt få det til at virke ved at bruge clear og derefter bruge position: relative; men synes bare ikke det er en optimal løsning.

Håber nogen kender problemet og kan hjælpe mig :)

mvh



7 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 13 karma
Sorter efter stemmer Sorter efter dato
#main_content {
overflow:hidden;
}

Det giver dig et clearfix som gør main_content rent faktisk har den rigtige højde.



Indlæg senest redigeret d. 27.02.2012 12:58 af Bruger #15754
Der er mange måder at clearfixe på.

at bruge overflow property er en måde. Du kan både bruge hidden og auto. Hvis du bruger hidden, så har du support for IE 5 på Mac - som ingen bruger mere - og du får problemer med indhold der forsvinder hvis du får horizontalt scroll i browseren - derfor er auto bedre. Den virker efter hensigten i alt undtagen IE5 til Mac, som får scrollbars på begge leder og kander.

Den mest almindelige måde at gøre det på er via en ny div, som har clear:both; sat. ala: <div style="clear:both"></div> efter dine floatede elementer. Det er den gode gamle metode - den virker altid og over det hele...

Du kan også bruge et pseudo-element med display: table - den metode og andre metoder, med anderledes support, men lignende teknik beskrives her: http://css-tricks.com/snippets/css/clear-fix/



Det moderne clearfix classe, som rammer 99% af alle browsere, selv ie6/7/8.

Fold kodeboks ind/udCSS kode 




Tak for hjælpen MB :)



overflow:hidden virker i 99% af alle ens tilfælde så længe man har styr på sine paddings/margins. Dog synes jeg <div style="clear:both"></div> er en utrolig grim måde og ordne det på fordi du ender med utrolig mange af disse tomme divs der gør din markup endnu mere uoverskuelig. Man kan også bruge :after, det virker bare ikke i IE7+8 også ender man med noget javascript der injecter divs hvis man bruger det.

Så er det i min mening klart nemmest og pænest at bruge overflow.



Indlæg senest redigeret d. 27.02.2012 14:00 af Bruger #15754
@MB, jeg skriver forskellige cases, og jeg siger ikke at overflow hidden er forkert - bare at der er et problem med den: hvis der kommer en bruger med et browser vindue der er mindre end sidens bredde så kan brugeren ikke se det, som er uden for den oprindelige viewport (det er i hvert fald tilfældet i webkit. Det undgår du ved at bruge auto - og det eneste der ikke virker efter hensigten med auto, er IE5 til Mac og det er ikke engang udgivet til intel macs...

Den metode Dan nævner er også den jeg omtaler. Oprindeligt stammer det fra Nicholas Gallager's indlæg der findes her: http://nicolasgallagher.com/micro-clearfix-hack/ . Det er understøttet i IE6+, Firefox 3.5+, Safari 4+, Chrome og Opera 9+.

Display table pseudo clear er den bedste løsning hvis du kan leve med zoom: 1; linjen, som ikke er valid CSS. Hvis du dropper den linje mister du kun support fra IE6 og 7...



Ye, jeg bruger den også mest fordi den følger med i HTML5BoilerPlate ... som jeg brugte meget en overgang, og da stadig stjæler lidt fra engang imellem.



t