CSS Float problem fixed

Sep 04

adminUncategorized No Comments

Floating Object/DIV

The Problem

You will find that sometime your layout not quite look the same as your expectations. For example, the DIV not display properly as below.

div.container {
border: 1px solid #000000;
width: 100%;
}
div.left {
width: 45%;
float: left;
background: #CCCC00;
}
div.right {
width: 45%;
float: right;
background: #CCCC00;
}
<div class=”container”>
<div class=”left”>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam viverra aliquam tincidunt. Suspendisse sed tincidunt orci. Mauris malesuada tempus ligula, nec sodales orci accumsan id.</p>
</div>
<div class=”right”>
<p>uis ornare faucibus dolor, sit amet fringilla lorem vulputate non.</p>
</div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam viverra aliquam tincidunt. Suspendisse sed tincidunt orci. Mauris malesuada tempus ligula, nec sodales orci accumsan id.

uis ornare faucibus dolor, sit amet fringilla lorem vulputate non.

The Solution

1. By adding a .clear class into the end of the last DIV

div.container {
border: 1px solid #000000;
width: 100%;
}
div.left {
width: 45%;
float: left;
background: #CCCC00;
}
div.right {
width: 45%;
float: right;
background: #CCCC00;
}
.clear {display:block; clear:both; line-height: 0px; font-size:0px; height:0px; visibility:hidden;}
<div class=”container”>
<div class=”left”>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam viverra aliquam tincidunt. Suspendisse sed tincidunt orci. Mauris malesuada tempus ligula, nec sodales orci accumsan id.</p>
</div>
<div class=”right”>
<p>uis ornare faucibus dolor, sit amet fringilla lorem vulputate non.</p>
</div>
<div class=”clear”>&nbsp;</div>
</div>

2. By adding overflow into CSS

div.container {
border: 1px solid #000000;
width: 100%;
overflow: hidden;
}
div.left {
width: 45%;
float: left;
background: #CCCC00;
}
div.right {
width: 45%;
float: right;
background: #CCCC00;
}
.clear {display:block; clear:both; line-height: 0px; font-size:0px; height:0px; visibility:hidden;}
<div class=”container”>
<div class=”left”>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam viverra aliquam tincidunt. Suspendisse sed tincidunt orci. Mauris malesuada tempus ligula, nec sodales orci accumsan id.</p>
</div>
<div class=”right”>
<p>uis ornare faucibus dolor, sit amet fringilla lorem vulputate non.</p>
</div>
<div class=”clear”>&nbsp;</div>
</div>

Leave a Reply