Clearning Floats

 

Once you float a <div>, all other elements underneath the <div> will be affected by the float and move up and under the <div>. In order to stop this affect, you can clear the float for the second element.

 

 

Example 1: Only Box 1 is floated to the left, so Box 2 will move up and under Box 1

 

<html>
<head><style type="text/css">

#box1 {
width: 200px;
height: 50px;
background-color: #ccffcc;
float: left;
}

#box2 {
width: 200px;
height: 70px;
background-color: #ccff00;
}

</style>

</head>


<body>
<div id="box1">
Box1.
</div>

<div id="box2">
Box2.
</div>
</body>

</html>

 

Result:

 

Box 1
Box 2

 

 

Example 2: Box 2 is cleared

 

<html>
<head><style type="text/css">

#box1 {
width: 200px;
height: 50px;
background-color: #ccffcc;
float: left;
}

#box2 {
width: 200px;
height: 70px;
background-color: #ccff00;
clear: left;
}

</style>

</head>


<body>
<div id="box1">
Box1.
</div>

<div id="box2">
Box2.
</div>
</body>

</html>

 

Result:

 

Box 1
Box 2

 

 

 

 

Buy "Digest Web Design" PDF Book

 

All the information on this website is also provided in a PDF book for only $30.
Click here to buy.

 

 

<<    Previous Page                                                                    Next Page    >>