[CSS] Margin-bottom werkt niet in IE, FF wel.

[KappuhH]

Het komende verhaal gaat over de volgende site: De Zwerfkei

Ik heb op deze site een div met daarin 2 andere div's, naast elkaar geplaatst. Nu moet er onder de langste div een stukje van 2pixels vrij houden. Dit wou ik doen door aan beide div's margin-bottom: 4px; mee te geven. In Firefox werkt het perfect, in Internet Explorer negeerd hij de margin-bottom als de brede div het langst is. Als echter de smalle (rechter) div langer is dan houdt hij wel 4pixels vrij, zoals hier.

Het desbetreffende stukje CSS:

code:

div#content /*De linker div, waarvan de margin-bottom niet werkt*/
{
display: inline;
position: relative;
float: left;
margin-left:4px;
margin-bottom: 4px;
padding: 4px;
width: 575px;
border: 1px solid #000000;
}

div#rightcontent /*De rechter div, waarvan de margin-bottom wel werkt*/
{
display: inline;
position: relative;
float: right;
margin-right: 4px;
margin-bottom: 4px;
padding: 4px;
width: 142px;
border: 1px solid #000000;
}

Zoals je ziet zijn ze identiek aan elkaar, hetzij dat links en rechts verwisseld zijn.

De hele CSS is hier te vinden.
Ik heb ook al de search doorgeploegd en gegoogled maar kan er niet uitkomen.

[NMe]

HTML, CSS, JavaScript, Flash en Director? Kijk eerst hier! (nota bene vandaag nog omhoog geschopt )

PW>>WG

[KappuhH]

Sorry, maar geen oplossing?

[BtM909]

Gevalletje van je floating-divs clearen

In je HTML-source met bijv. <br clear="all"> direct achter je rightcontent of in je CSS op de eerstvolgende container clear: both;

---

En een kick als deze is echt niet nodig hoor

KappuhH schreef op maandag 28 november 2005 @ 19:31:
Sorry, maar geen oplossing?

[ Voor 35% gewijzigd door BtM909 op 28-11-2005 19:52 ]

[KappuhH]

BtM909 schreef op maandag 28 november 2005 @ 19:51:
En een kick als deze is echt niet nodig hoor

Het was niet bedoeld als kick hoor, de post was bedoeld als verontschuldiging.

Verder heb ik het probleem opgelost:

Heb onder de laaste div een nieuwe div geplaatste waar ik een <hr> ingezet heb. Deze <hr> heb ik een display: none; meegegeven. De div waar die <hr> in stond heb ik clear: both; meegeven en het probleem was gefixed. Ik vind het zelf geen perfecte oplossing maarja het werkt iig.

[crisp]

IE's floatmodel is gewoon buggy.
Ik zag dat je wel je #rondom al een overflow: auto had gegeven voor de auto-clearing in Ff.

Wat je ook nog had kunnen doen is een extra div enkel om #content en #rightcontent heen met overflow:auto of hidden en daar dan de margin-bottom op zetten.

[ Voor 3% gewijzigd door crisp op 28-11-2005 22:38 ]