Clear after floating element in HTML and CSS

Description

The following code shows how to clear after floating element.

Example


<!--   w w  w  . ja v a 2s  . c om-->


<html>
<head>
<style type="text/css" media="screen">
#wrapper {
width: 700px;
margin: 0 auto;
background: #bbbbbb;
}

#divOne, #divTwo {
float: left;
width: 100px;
}

#divOne {
margin-right: 20px;
}

.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
</head>
<body>
<div id="wrapper" class="clearFix">
<h1>Working with two divs</h1>
<div id="divOne">
<h2>Div one</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
<p>Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum.</p>
<p>Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros. Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio.</p>
</div>
<div id="divTwo">
<h2>Div two</h2>
<p>Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis. Donec eget sem sit amet ligula viverra gravida. Etiam vehicula urna vel turpis. Suspendisse sagittis ante a urna.</p>
<p>Morbi a est quis orci consequat rutrum. Nullam egestas feugiat felis. Integer adipiscing semper ligula. Nunc molestie, nisl sit amet cursus convallis, sapien lectus pretium metus, vitae pretium enim wisi id lectus. Donec vestibulum. Etiam vel nibh. Nulla facilisi. Mauris pharetra. Donec augue. Fusce ultrices, neque id dignissim ultrices, tellus mauris dictum elit, vel lacinia enim metus eu nunc.</p>
<p>Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. Sed consequat ligula nec tortor. Integer eget sem. Ut vitae enim eu est vehicula gravida. Morbi ipsum ipsum, porta nec, tempor id, auctor vitae, purus. Pellentesque neque. Nulla luctus erat vitae libero. Integer nec enim.</p>
</div>
</div>
<p>Subsequent content...</p>
</body>
</html>

Click to view the demo

The code above generates the following result.

Clear after floating element in HTML and CSS

Home »
  HTML CSS Tutorial »
    Layout »
      Position

...
Use bottom to align the bottom side of an a...
Top Align Static Block in HTML and CSS
Top offset Static Block in HTML and CSS
Align Center for static block in HTML and C...
Align Left and top for Static Block in HTML...
Align Right for static block in HTML and CS...
Bottom Align Static Block with margin-botto...
Center Static Block in HTML and CSS
Left Align Sized Static Block with margin-r...
Right align Sized Static Block in HTML and ...
Stretch Static Block right alignment in HTM...
Place Sized Relative layout block in HTML a...
Position block to the bottom right of the r...
Use negative value in left for relative pos...
Use position relative with top and left val...
Use relative position with top and left in ...
Use relative position with top and left set...
Use relative position with top and left: va...

Clear after floating element in HTML and CS...

Clear right for above float right element i...
Compare clear both with not clear elements ...
Make a new line br to clear right in HTML a...
Make element clear from the both side in HT...
Make element overlap with clear left for fl...
Do center alignment in HTML and CSS
Do Left-top Alignment in HTML and CSS
Do Right-bottom Alignment in HTML and CSS
Four column layout in HTML and CSS
Get implied width and height when all four ...
Make container grow height as child div gro...
Make div grow as children grow in HTML and ...
One column layout with header and footer in...
One column three parts layout:header, conte...
Position Image in relation to containing el...
Right-top Align and Offset in HTML and CSS
Set display to inline table for div element...
Set top to 100px in HTML and CSS
Set up four column layout in HTML and CSS
...