Geek Answers Handbook

How to add bottom padding to a div containing 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 to add a bottom complement to the parent div and make it work in IE6 (or, in other words, avoid errors in IE6)?

thanks

+3
source share
5 answers

In my CSS reset file, I have the code "clearfix":

.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;}

, : IE6/7, FF2/3, Opera, Safari.

?

- :

<div class="clearfix">
    <div class="floatLeft">
        left div
    </div><!-- /.floatLeft-->

    <div class="floatRight">
        right div
    </div><!-- /.floatRight-->
</div><!-- /.clearfix-->

! clearfix (, , ), .

+5

div.

+3

, IE

<!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>
+1

IE, , , . , .

, , , , float div. div , .

+1
source

As with one of the other answers, it worked for me in Firefox, and it uses a little less code. I think it works well in other browsers too, but you have to confirm.

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

More articles:


All Articles