[CSS] Mozilla: hoogte van een div n.a.v. hoogte image/div

[RupS]

Vage titel, ik weet het maar het probleem is als volgt:

Ik heb een CMS(je) gebouwd op basis van div's. In het midden heb ik zogenaamde "items" waar een image in kan staan. Het kan voorkomen dat de tekst binnen het item-div minder "hoog" is dan het plaatje. De div wordt alleen niet groot genoeg waardoor het plaatje wordt afgekapt. IE en Opera doen het allebei wel goed, maar in mozilla (firefox) ziet het er als volgt uit:



Wat heb ik al geprobeerd:
- Een div om de image heenzetten -> dit had geen effect (bij mij althans )
- clear: both; in de item div -> dit heeft in ieder geval als effect dat de tweede div niet "over" het plaatje heen begint
- position: absolute; -> dit werkt, alleen komen dan alle items over elkaar heen, wat niet echt wenselijk is...

Html versie staat hier

CSS Code van het item div, waarin dan de <img> staat:

Cascading Stylesheet:

div.item {
    position:relative;
    background-color: #e2e2e2;
    border: 1px dashed black;
    clear: both;
    width: 450px;
    margin: 0px auto 15px auto;
}

Wie weet hoe ik dit het makkelijkst (met CSS) kan oplossen? Het zal wel (weer) erg simpel zijn, maar ik kom er niet uit...

[Michali]

Dat clear: both kun je uit div.item halen. Je moet een <div style="clear: both;"></div> (of <br style="clear: both;"/> of whatever) tag genest in je item zetten aan het eind. Dan wordt de div juist gerenderd. (mischien een FAQ vraagje dit? ik zie hem wel veel voorbij komen de laatste tijd)

[disjfa]

Michali schreef op 29 maart 2004 @ 13:07:
(mischien een FAQ vraagje dit? ik zie hem wel veel voorbij komen de laatste tijd)

Helaas is dat niet de oplossing deze keer

Verder wat je kan doen is je container div waar de 2 stukjes inzitten een achtergrond mee te geven die verticaal herhaalt zodat als je plaatje langer word dmv de achtergrond het rechterstukje optisch ook meebeweegt.

owjee, ik denk weer te moeilijk zo te lezen....

[ Voor 6% gewijzigd door disjfa op 29-03-2004 13:22 ]

[Eärendil]

Die oplossing werkt hier anders perfect:

code:

<div class="item" id="item0">
<h2>Sharon in het nauw</h2>
[img]"test_files/140.jpe"[/img]
<p>Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. </p>
<br style="clear:both;" />
</div>

[ Voor 23% gewijzigd door Eärendil op 29-03-2004 13:25 ]

[RupS]

disjfa schreef op 29 maart 2004 @ 13:11:
[...]

Helaas is dat niet de oplossing deze keer

Sorry disjfa, maar het werkt wel

Ik had inderdaad ook een topic van gisteren gevonden met een soortgelijk probleem, maar omdat het bij mij alleen in mozilla "fout" gaat en de oplossingen van dat topic niet werkten opende ik een nieuwe topic. Ik had niet begrepen dat de clear: both; genest in de bestaande div moest komen, maar nu ik dat heb gedaan werkt het wel...

Prima dat het zo wel werkt, maar kan iemand me uitleggen waarom dat zo is? Is het default behaviour, of gaan de browsers in kwestie er op hun eigen manier mee om?

[Eärendil]

clear:both zorgt dat het object waar je het op toepast lager komt op het scherm (als dat nodig is). Als dat object niet binnen de div staat rekt de border van de div natuurlijk niet op, dus Mozilla zit hier niet fout

[T-MOB]

Even duidelijkere uitleg...
Een float zorgt ervoor dat het gefloate object naar links of naar rechts "drijft". Daarmee valt het buiten de normale flow van elementen. Dat is ook wenselijk, in een typisch voorbeeld heb je tekst met een gefloat plaatje. De tekst moet daaromheen vallen. Wat als je plaatje hoger is dan de betreffende paragraaf? Dan wil je dat de volgende paragraaf ook om het plaatje valt, niet eronder.

code:

 _____
[     ] [p]bla die bla
[     ] die bla die [/p]
[_____] [p]bla die bla
die bla die bla die bla[/p]

en dus niet zo:
 _____
[     ] [p]bla die bla
[     ] die bla die [/p]
[_____] 
[p]bla die bla die bla
die bla die bla[/p]

Zo gedraagt de float zich dus, als een gefloat element in een ander element staat telt dus de hoogte van het gefloate element niet bij de hoogte van de parent. Om dit te bereiken gebruik je de clear op een element eronder. Daarmee positioneer je dat element onder het plaatje en moet de parent wel oprekken.

[RupS]

T-MOB schreef op 29 maart 2004 @ 14:28:
[..knip..]

Thanx voor de uitleg! en de rest voor de reacties natuurlijk, hier kan ik mee verder. Ik moet zeggen dat het wel even wennen is aan div's in plaats van tables, maar als het eenmaal goed werkt :