homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Float Problem Cross Browser

5+ Year Member

Msg#: 3795097 posted 3:23 am on Nov 27, 2008 (gmt 0)

I'm trying to set up a three-column layout in CSS using float tags, but they're showing up differently between IE and Firefox. Here's a quick demo of the code I'm working with:

<div id="wrapper" style="background-color:#c0c0c0; border:#000000 1px solid;">

<div id="column1" style="float:left;">Text...</div>
<div id="column2" style="float:left;">Text...</div>
<div id="column3" style="float:left;">Text...</div>


In IE, the wrapper's background color and border extend down to encompass all the content inside the columns. However in Firefox, the wrapper only extends down one line in the background, letting all the column content stick out the bottom. I've cheated my way to fix this in the past, but I'm looking for a real solution if there is one. Thoughts? Help? Thanks!

[edited by: eelixduppy at 8:27 am (utc) on Nov. 27, 2008]



WebmasterWorld Senior Member 5+ Year Member

Msg#: 3795097 posted 8:21 pm on Nov 26, 2008 (gmt 0)

try floating the wrapper left as well.

then put the wrapper in a body-wrap and set margin:0 auto;

i think that worked for me.


WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 3795097 posted 9:44 pm on Nov 27, 2008 (gmt 0)

A normal block is not supposed to stretch for its children that are floated. So to stretch it again you can add content after the children that does clear the floated elements and itself is not floated.

Typically you can use a <br class="clear" /> for it and then
style it with:

.clear {

Alternatively you can use an ":after" that has the clear property set (search for clearfix, but take not to fall for the hacks that many examples come with)

IE: well it's got it wrong (not that uncommon). If IE doesn't do it, it'll get it seriously wrong when you need it to do it too, so you might need to give the parent 'hasLayout' (by e.g. giving it zoom:1 in the conditional comment)

A floated parent indeed is supposed to stretch to encompass its content, but it's not always a good option to go that avenue.


5+ Year Member

Msg#: 3795097 posted 5:40 am on Nov 28, 2008 (gmt 0)

The <br style="clear: both;" /> worked like a charm. Thanks!

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved