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>
___[ ]__[ ]__[ ]__[ ]__[ ]__[ ]___
___[ ]__[ ]__[ ]________________
______________________________
not like this which is what I get now...
[ ]__[ ]__[ ]__[ ]__[ ]__[ ]
[ ]__[ ]__[ ]_____________
________________________
