Welcome to WebmasterWorld Guest from 18.104.22.168
Forum Moderators: not2easy
<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]
Typically you can use a
for it and then
<br class="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.