Feb 02

centring float left elements

HTML Add comments

I wanted to center the divs which are floated left.

I searched the web and found this and it is working for me.

http://stackoverflow.com/questions/1084666/how-can-i-center-the-contents-of-a-div-that-float-left

This is just a copy for my reference even if that content is getting deleted future.

Besides, the following is the code which does the exact trick which is referred in the above stackoverflow url.

http://www.pmob.co.uk/temp/centred-float4.htm

<style type="text/css">
html,body{
	margin:0;
	padding:30px 10px;
	text-align:center;
}
#outer{
	width:780px;
	margin:auto;
	text-align:left;
	border:1px solid #000;
}
#outer{position:relative}
.navwrap{
	float:right;
	position:relative;
	left:-50%;
	text-align:left;
	margin-bottom:2em;
}
.navwrap ul{
	list-style:none; 
	position:relative;
	left:50%;
	margin:0;
	padding:0;
} 
.navwrap li{
	border:1px solid #eff2df;
	float:left;
	margin:0 10px 0 0;
	background:#809900;
}
.navwrap li.last{margin-right:0}
.navwrap li a{
	float:left;
	border:1px solid #4c7300;
	position:relative;
	left:-2px;
	top:-2px;
	background:#eff2df;
	color:#4c7300;
	text-decoration:none;
	padding:6px 10px;
	font-weight:bold;
}
.navwrap li a:hover{
	background:#809900;
	color:#fff;
}
p{clear:both;padding:10px}
h1{text-align:center;margin:1em 0;}
.clearer{
	height:1px;
	overflow:hidden;
	margin-top:-1px;
	clear:both;
}
 
 
 
</style>
<!--[if IE ]>
<style type="text/css">
.navwrap ul{float:left;} 
 
</style>
<![endif]-->
 
<div id="outer">
	<h1>Centred Widthless floats</h1>
	<div class="navwrap">
 
		<ul>
			<li><a href="#">Button 1</a></li>
			<li><a href="#">Button 2's a bit longer</a></li>
			<li><a href="#">This is Button 3</a></li>
			<li><a href="#">B 4</a></li>
			<li><a href="#">Button 5</a></li>
 
			<li class="last"><a href="#">This is Button 6</a></li>
		</ul>
	</div>
	<div class="clearer"></div>
	<!-- ie needs this clearer -->
	<div class="navwrap">
		<ul>
			<li><a href="#">Button 1</a></li>
 
			<li><a href="#">Button 2's a bit longer</a></li>
			<li class="last"><a href="#">This is Button 3</a></li>
		</ul>
	</div>
	<div class="clearer"></div>
	<!-- ie needs this clearer -->
	<div class="navwrap">
		<ul>
 
			<li class="last"><a href="#">Button 1</a></li>
		</ul>
	</div>
	<p>The above navigation is floated using widthless floats and centred using a technique that moves the right floated parent wrapper 50% back towards the left using relative positioning -50%) and then applying a +50% left shift on the inner element also using relative positioning.</p>
	<p> The combined effect of this is to center the navigation within our layout</p>
</div>

Leave a Reply

Entries RSS