CODEWITHSUNDEEP
css
Waleed Eissa
Waleed Eissa

Reputation: 10543

How to add bottom padding to a div that contains floating divs?

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

Upvotes: 4

Views: 11835

Answers (5)

sugardaddy
sugardaddy

Reputation: 443

Similar to one of the other answers, this one worked for me in Firefox, and uses a bit less code. I think it works well in the other browsers as well, but you should confirm.

.clearFix::after{
content: '';
display: block;
clear: both;
}

Upvotes: 0

Ionuț Staicu
Ionuț Staicu

Reputation: 22204

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.

Upvotes: 5

Josh Schultz
Josh Schultz

Reputation: 8190

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.

Upvotes: 1

bochgoch
bochgoch

Reputation: 7193

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>

Upvotes: 1

Sophie Alpert
Sophie Alpert

Reputation: 143204

Try floating the parent div.

Upvotes: 3

Related Questions