float left prevent centering of multiple left float within a div

A

Anonymous

Guest
I have a div box with multiple left floated div boxes and I am trying to get these left floated divs to be centered within the outer div. So it has equal gap on the left and right side of the group of left floats.

Its for a responsive page so depending on the size of the browser or the device viewing the page, the content will reduce because of the 100% of the outer class, but the content of this I am wanting to be centered but still each one to the left until the page can not take any more when the next one drops to the next line.

The width of the leftfloat will always be the same.

Does anyone know of a way I might be able to do this ?

Code: 
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.outer { width: 100%; }
.leftfloat { float: left; width: 10em; }
</style>
</head>

<body>
		<div class="outer">
			<div class="leftfloat">float 1</div>
			<div class="leftfloat">float 1</div>
			<div class="leftfloat">float 1</div>
			<div class="leftfloat">float 1</div>
			<div class="leftfloat">float 1</div>
			<div class="leftfloat">float 1</div>
			<div class="leftfloat">float 1</div>
			<div class="leftfloat">float 1</div>
			<div class="leftfloat">float 1</div>
		</div>
</body>
</html>

a bit like this...

___[ ]__[ ]__[ ]__[ ]__[ ]__[ ]___
___[ ]__[ ]__[ ]________________
______________________________

not like this which is what I get now...

[ ]__[ ]__[ ]__[ ]__[ ]__[ ]
[ ]__[ ]__[ ]_____________
________________________
 
Hi Jason,

You could try using padding, for example:
padding-right: 20px; padding-left: 20px;

Hope that helps,
Jon
 
You must log in or register to reply here.
Back
Top