Divs satt til inline-block, holder seg ikke lenger "inline" når de får innhold

[WillY-]

Atter engang sitter jeg og river meg i håret over CSS! Denne gangen skulle jeg bare få to divs satt opp ved siden av hverandre. Hadde jo fint løst det med float men da fucker det for alle block-elementene under, pluss at wrapperen ikke "wrapper" float-elementene. Derfor prøvde jeg meg med display:inline-block.

 

Bilde:

 

Vel det fungerte ikke så bra det heller som dere kan se.. Av en eller annen grunn så spretter den ene ned når jeg gir den innhold. <p>Graph</p> i dette tilfellet. Hva kommer det av?? Evt. noen bedre løsninger?

Og, hvorfor oppfører float seg som om den ikke har "collision" på andre block elementer?

[agm]

Hvis du bruker floats kan du i de fleste tilfeller korrigere feilene ved å tvinge "parent" til å klarere floats:

 

.parent:after {
   content: "";
   clear: both;
   display: block;
}

[WillY-]

Det så ut til å holde parent/wrapperen på plass ja (hvis det var det du mente?).

Et annet spørsmål: bør man egentlig ikke blande floats og andre block elementer under samme parent? Fordi nå så jeg at float elementene ignorerer block elementet under sin margin-top (den lista du ser under på bildet). Men float-elementene sin margin-bottom ser ut til å fungere hvertfall

 

Edit:

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

imellom så ut til å fikse det

Endret 5. september 2012 av WillY-