I have a div that contains other floating divs:
<div id="parent">
<div style="float:left;">text</div>
<div style="float:left;">text</div>
<div style="float:right;">text</div>
</div>
How can I add bottom padding to the parent div and make it work in IE6 (or in other words avoid the bugs in IE6)?
Thanks
The box model hack, basically providing IE specific padding should help
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>demo</title>
<style type="text/css">
<!--
div {
height:100px;
border:1px solid black;
padding-bottom:10px;
}
div {
\height: 140px;
h\eight: 100px;
}
-->
</style>
</head>
<body>
<div id="parent" style="float:left;">
<div style="float:left;">text</div>
<div style="float:left;height:100px">text</div>
<div style="float:right;">text</div>
</div>
</body>
</html>
IE doesn't seem to calculate the height of the parent when all the children are floated. If you can get away with applying a fixed height to the parent, you'll be able to add bottom padding.
If you can't fix the height of the parent, the next thing I'd do is see if there's a way to remove the float from the tallest child div. That'll give the parent div an actual height, and then the bottom padding should show up.
In my CSS reset file i have a "clearfix" code:
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
* html .clearfix {height:1px;}
Looks weird but works great on ALL common browsers : IE6/7, FF2/3, Opera, Safari.
How to use?
Something like this:
<div class="clearfix">
<div class="floatLeft">
left div
</div><!-- /.floatLeft-->
<div class="floatRight">
right div
</div><!-- /.floatRight-->
</div><!-- /.clearfix-->
ATTENTION! Do NOT use clearfix class on footers (or at last element in page), otherwise you will have an ugly space under all content.