Update:
Code to demonstrate "alignment 1" (pure CSS) AND "alignment 2" (needs javascript) is now appended, below.
Not the answer you want, but AFAIR, you can't do that with CSS and a fluid layout.
You can center div#bricks
content if you are willing to put up with this kind of alignment:
(1)
■■■■■
■■■
But not:
(2)
■■■■■
■■■
To do the latter, you'll need javascript to:
- Measure the size of
div#bricks
. (ContainerSize)
- Measure the size of an individual
div.brick
. (BrickSize)
- Compute the "margin" = ContainerSize % BrickSize .
- Append
div.brick
s style with: left: {margin / 2}
.
Of course, I'd love to be proved wrong.
Code for "alignment 1":
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Flexiblock, Centered Layout, CSS only</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div#main {
margin:0 auto;
padding:0 50px;
position:relative;
max-width:90em;
/*-- Added styles, below --
*/
color:white;
}
.group:after {
content:".";
clear:both;
display:block;
height:0;
visibility:hidden;
}
div#bricks {
margin:0 auto;
background:red;
width:100%;
/*-- Added styles, below --
*/
text-align:center;
}
div.brick {
background:#181c21;
width:230px;
position:relative;
/*-- Deleted
float:left;
margin:0 5px 10px 5px;
*/
/*-- Added styles, below --
*/
display: inline-block;
text-align:left;
margin:0 2px 10px 2px;
}
div.brick img {
background:#666;
max-width:230px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
div.brick {
display: inline;
}
</style>
<![endif]-->
</head>
<body>
<div id="main">
<div id="bricks" class="group">
<div class="brick">
<h3>Biodesign</h3>
<p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
</div>
<div class="brick">
<h3>Biodesign</h3>
<p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
</div>
<div class="brick">
<h3>Biodesign</h3>
<p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
</div>
<div class="brick">
<h3>Biodesign</h3>
<p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
</div>
<div class="brick">
<h3>Biodesign</h3>
<p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
</div>
<div class="brick">
<h3>Biodesign</h3>
<p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
</div>
<div class="brick">
<h3>Biodesign</h3>
<p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
</div>
</div><!--end #bricks-->
</div>
</body>
</html>
.
Code for "alignment 2":
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Flexiblock, Centered Layout, needs JS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div#main {
margin:0 auto;
padding:0 50px;
position:relative;
max-width:90em;
/*-- Added styles, below --
*/
color:white;
}
.group:after {
content:".";
clear:both;
display:block;
height:0;
visibility:hidden;
}
div#bricks {
margin:0 auto;
background:red;
width:100%;
}
div.brick {
background:#181c21;
width:230px;
margin:0 5px 10px 5px;
position:relative;
float:left;
}
div.brick img {
background:#666;
max-width:230px;
}
</style>
<!-- Our javascript requires jQuery. -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function CenterBrickSet ()
{
/*---
1. Measure the size of div#bricks. (ContainerSize)
2. Measure the size of an individual div.brick. (BrickSize)
3. Compute the "margin" = ContainerSize % BrickSize .
4. Append div.bricks style with: left: {margin / 2} .
Requires jQuery (for cross-browser use).
*/
var iContainerWidth = $('#bricks')[0].clientWidth;
/*--- Get the "brick" width by comparing the left offsets of the first two bricks. This
accounts for margin.
*/
var zBrickSet = $('.brick');
var iBrickWidth = zBrickSet[1].offsetLeft - zBrickSet[0].offsetLeft;
if (!iBrickWidth)
iBrickWidth = zBrickSet[0].clientWidth + 10; //-- 10 is total margin width from the style (pixels).
var iMarginAdjust = (iContainerWidth % iBrickWidth) / 2;
/*-- Set each brick's left position. Alternatively adjust the global style.
*/
zBrickSet.each
(
function () {$(this)[0].style.left = iMarginAdjust + 'px';}
);
}
$(document).ready (CenterBrickSet);
</script>
</head>
<body>
<div id="main">
<div id="bricks" class="group">
<div class="brick">
<h3>Biodesign</h3>
<p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
</div>
<div class="brick">
<h3>Biodesign</h3>
<p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
</div>
<div class="brick">
<h3>Biodesign</h3>
<p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
</div>
<div class="brick">
<h3>Biodesign</h3>
<p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
</div>
<div class="brick">
<h3>Biodesign</h3>
<p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
</div>
<div class="brick">
<h3>Biodesign</h3>
<p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
</div>
<div class="brick">
<h3>Biodesign</h3>
<p>Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante.</p>
</div>
</div><!--end #bricks-->
</div>
</body>
</html>