April 09 2016

CSS last float left full width

Tagged Under :

css3
I think some of the people facing some problem with me. How to set last float left to 100 percent or full width in div.

At below, I provide some example how to solve the problem. It not prefect, but work for me.

Example:
The example i give is 3 div in 1 row. 
<div>
	<div class="col1">Column 1</div>
	<div class="col2">Column 2</div>
	<div class="col3">Column 3</div>
</div>
And then the CSS script, please be careful the last div, it didn’t use float:left anymore! 
.col1{
	background-color:#A9D0F5;
}
.col2{
	background-color:#E1F5A9;
}
.col3{
	background-color:#FE2E64;
}
.col1, .col2 {
	float:left;
	height:200px;
	width:150px;
	text-align:center;
}
.col3 {
	margin-left:300px;
	height:200px;
	text-align:center;
}
Try copy the script and run on your browser. you will found that the last div now is full width and the content display property on the browser.

You can try see the example with this link.

Related Posts

Posted by chevrons in CSS3, Dhtml
No Comments

Make a Comment

You must be logged in to post a comment.