shabashj
8/11/2016 - 7:20 AM

CSS Float example: wrapper:after clears document flow

CSS Float example: wrapper:after clears document flow

index.html
content_copyfile_download
<!DOCTYPE html>
<html>

<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div class="wrapper">
        <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fermentum augue sodales, ultrices orci vitae, ultrices ipsum. Curabitur non vestibulum risus, a lobortis mauris. Morbi condimentum massa lectus, et consectetur massa sagittis sit amet. Aliquam maximus, nunc ac rhoncus ornare, nibh augue tempus magna, ac faucibus orci lacus a metus. Aliquam ligula velit, posuere id ante eget, tempus scelerisque dolor. Fusce at sem sed felis laoreet tempus ut sed tellus. In risus nisl, scelerisque eget urna eu, porta aliquam dolor. Integer vel erat purus. Duis a finibus libero. Mauris ultricies mi nec feugiat laoreet. Curabitur sem urna, egestas et iaculis eget, volutpat a neque. Nullam eu mauris vel nisi condimentum ultrices ut non felis. Proin tempor lacus venenatis semper pulvinar. Aenean volutpat diam eros, ac bibendum odio dignissim et. Etiam ac ligula quam. Duis facilisis urna in felis ullamcorper ultrices.
        </div>
        <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fermentum augue sodales, ultrices orci vitae, ultrices ipsum. Curabitur non vestibulum risus, a lobortis mauris. Morbi condimentum massa lectus, et consectetur massa sagittis sit amet. Aliquam maximus, nunc ac rhoncus ornare, nibh augue tempus magna, ac faucibus orci lacus a metus. Aliquam ligula velit, posuere id ante eget, tempus scelerisque dolor. Fusce at sem sed felis laoreet tempus ut sed tellus. In risus nisl, scelerisque eget urna eu, porta aliquam dolor. Integer vel erat purus. Duis a finibus libero. Mauris ultricies mi nec feugiat laoreet. Curabitur sem urna, egestas et iaculis eget, volutpat a neque. Nullam eu mauris vel nisi condimentum ultrices ut non felis. Proin tempor lacus venenatis semper pulvinar. Aenean volutpat diam eros, ac bibendum odio dignissim et. Etiam ac ligula quam. Duis facilisis urna in felis ullamcorper ultrices.        
        </div>
        <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fermentum augue sodales, ultrices orci vitae, ultrices ipsum. Curabitur non vestibulum risus, a lobortis mauris. Morbi condimentum massa lectus, et consectetur massa sagittis sit amet. Aliquam maximus, nunc ac rhoncus ornare, nibh augue tempus magna, ac faucibus orci lacus a metus. Aliquam ligula velit, posuere id ante eget, tempus scelerisque dolor. Fusce at sem sed felis laoreet tempus ut sed tellus. In risus nisl, scelerisque eget urna eu, porta aliquam dolor. Integer vel erat purus. Duis a finibus libero. Mauris ultricies mi nec feugiat laoreet. Curabitur sem urna, egestas et iaculis eget, volutpat a neque. Nullam eu mauris vel nisi condimentum ultrices ut non felis. Proin tempor lacus venenatis semper pulvinar. Aenean volutpat diam eros, ac bibendum odio dignissim et. Etiam ac ligula quam. Duis facilisis urna in felis ullamcorper ultrices.
    </div>
</body>

</html>
style.css
content_copyfile_download
body{
	background: lightgrey;
}

.wrapper{
	margin: 0 auto;	
	max-width: 960px;
	padding: 20px;
	background: white;
}

.wrapper:after{
	content: "";
	display: block;
	clear: both;
}

#box {	
    background-color: lightblue;
    margin-bottom: 5px;
    width: 29%;
    margin: 1%;
    padding: 1%;
   	float: left;   	
}