float left prevent centering of multiple left float within a div

Questions and tutorials related to Cascading Style Sheets *all versions*

Moderators: egami, macek, gesf

Post Reply
Jason_C
New php-forum User
New php-forum User
Posts: 47
Joined: Sat Nov 18, 2006 7:32 am

Sat Jul 18, 2015 1:42 am

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: Select all

<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...

[ ]__[ ]__[ ]__[ ]__[ ]__[ ]
[ ]__[ ]__[ ]_____________
________________________

element121
php-forum Fan User
php-forum Fan User
Posts: 606
Joined: Sat Jun 06, 2015 11:46 am
Contact:

Wed Sep 23, 2015 10:35 am

Hi Jason,

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

Hope that helps,
Jon

Post Reply