Div i divs

Som @Michael siger så er et clearfix ... En clearfix klasse nok det bedste og mest anvendte da det ikke kræver ekstra unødvendige (-og usemantiske) elementer.

Fordi du skal "cleare" dine float værdier. Det kan gøres på flere måder - den mest udbredte er vidst at tilføje (efter de to divs):

<br style="clear:both" />

De mest udbredte løsninger, den ene er den nævnte. Den anden og nok mere anvendte er clearfix.

Alternativt kan du lave en div boks til at cleare dine floats med.

HTML:
<div class="clear"></div>

CSS:
div.clear {
clear:both;
}

Mange tak for hjælpen til jer alle!

@dan Et ekstra div element er da ligeså usemantisk som et linebreak. En semantisk løsning, finder man vha. CSS3, såsom første svar i følgende tråd:
http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best

^ tæt på det samme som beskrevet på udvikleren her

Halvvej nede i indlægget på nedestående link findes en mere logisk tilgang til hvad clearfix være, og hvorfor clearfix ikke bør hedde clearfix.

link: http://css-tricks.com/snippets/css/clear-fix/

Bare lige for at få terminologien på plads, så benævnes alle disse løsningsforslag som clearfixes. :-)

De virker nok alle sammen stadig i alle morderne browsere, men Nicolas Gallaghers version, som både Michael og Jakob henviser til, er den bedste løsning og den som alle bør bruge. Det er det tætteste på en pæn løsning af clearfix problematikken vi nogen sinde har været, og den kan tilpasses endda gøres pænere hvis du ikke behøver at bekymre dig og forældede browsere.

Der findes to løsninger til samme løsning i dette tilfælde:

1) Clearfix (Som allerede nævnt) : Her bruges float, hvilket fjerner dine to div's fra sammenhængen med den udenomliggende div og derfor den "kollapser". Denne løsning har jeg aldrig været fan af netop fordi jeg synes det at hive noget ud af den måde som HTML'en renderes på gør det ikke specielt pænt, men det fungerer ja ganske rigtigt.

2) Display: Inline-block
Her renderes dine divs indeni den forudgående, men kun til der hvor du har indhold (eller en defineret størrelse).
Så hvis du har meget indhold vil den fylde meget, og hvis du har lidt vil den fylde lidt.
Det kan altid sættes i faste rammer med width, min-width, max-width og samme for height. Altså vil du kunne sætte div 1 til 50% og div 2 til 50% for at løse det, og det vil være ligesom alle mulige andre almindeligt renderede html elementer.