Divs and Fire Fox does not work

[Girard Ibanez]

How to make the following three divs stack one on top of each other and the fourth div float to the left of all three divs. M$ works .... FF does not...

HTML:

<div id="container">

<div id="one"> <p>some text</p></div>
<div id="two"> <p>some text</p></div>
<div id="three"> <p>some text</p></div>
<div id="fourth"> <p>some text</p></div>

</div>


CSS:

#one {float:left; clear:left;}
#two {float:left; clear:left;}
#three {float:left; clear:left;}
#four {float:left;}

With FF, the fourth div floats left of the third div

With IE, the fourth div floats left of the first div ....this is what I want.

[Twey]

You must specify a width for floated elements.
#container div {
width: 100%;
float: left;
clear: left;
}

#four {
clear: none;
}

[Girard Ibanez]

Still same ... here's the actual css code.

FF floats the fourth div but only up to the 3rd div. Not sure how to get FF to float the fourth div next to the first div.

If you need the html let me know.



#container {
width: 46em;
text-align:left;
margin: 0em auto;
padding: 0em;
background-color: #e8e8e8;
color: #000;
}


#lcontent1 {
float: left;
clear: left;
width: 10em;
margin: 0em;
padding: 0emm;
}

#lcontent2 {
float: left;
clear: left;
width: 10em;
margin: 0em;
padding: 0em;
}

#lcontent3 {
float: left;
clear: left;
width: 10em;
margin: 0em;
padding: 0em;
}

#rcontent {
float: left;
width: 33em;
padding: 0em;
margin: 0em;
background-color: #e8e8e8;
color: #000;
border-left: .06em solid #ccc;
border-bottom: .06em solid #ccc;
}

[Twey]

FF floats the fourth div but only up to the 3rd div. Not sure how to get FF to float the fourth div next to the first div.It will do that. If you want a layout like the one you are describing, take the clear: left; off the second div, put it on the fourth div, and put the content from the fourth div into the second div.

[mwinter]

How to make the following three divs stack one on top of each other and the fourth div float to the left of all three divs.

If you need to maintain content order, then use absolute positioning. That is, if the content of the fourth element should logically occur after the other three (think about what happens with CSS disabled or how search engines will see the source), add appropriate left margins to the first three elements, absolutely-position the fourth, and relatively-position the container.

If the content is relatively independent (like a navigation menu), put it as the first element, float it, and allow the others to flow normally (no floats, no positioning). You can, if you like, add left margins here as well if you want a consistent left edge for the non-floated content.

Mike

[Girard Ibanez]

Thanks again for the advice.

Will do...