WN - CSS-boxar som strular

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - CSS-boxar som strular (https://www.wn.se/forum/showthread.php?t=20520)

Kod:

<div style="width:500px; background-color: red;">

        <div style="width:250px; float: left;">Kolumn 1<br/>Lite text</div>

        <div style="width:250px; float: left; overflow: hidden;">Kolumn 2</div>

</div>



<div style="width:500px; background-color: blue;">

Lite text här nere. Tralalla...

</div>

När jag kör detta visas det som:

Kolumn 1 Kolumn 2
Lite text Lite text här nere. Tralalla...

All bakgrund blir blå. Genom att lägga in height: 50px; i den första div:en blir det precis som jag tänkt mig, dvs.

Kolumn 1 Kolumn 2
Lite text
Lite text här nere. Tralalla...

Jag vill dock inte sätta height: 50px; utan få detta ändå.

Nån som har nån idé?

Dina float divar behöver clearas innan diven med blåe bakgrund kommer... låter kryptiskt kanske...

Det finns olika sätt att lösa det hela på. Googla på clearing floats eller nåt sånt så hittar du säkert nån bra artikel.
Ett sätt att lösa det är att lägga in ett extra element, typ diven som har det onödiga id:t: extraelement nedan...

Kod:

<div style="width:500px; background-color: red;">

<div style="width:250px; float: left;">Kolumn 1<br/>Lite text</div>

<div style="width:250px; float: left; overflow: hidden;">Kolumn 2</div>

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

</div>



<div style="width:500px; background-color: blue;">

Lite text här nere. Tralalla...

</div>

/Lycka till
H