CSS Fluid Grid Layout Problem
- by Fuego DeBassi
I have a max-width em based container for my layout. Within it I have many floated fixed width boxes, at 230px to be exact.
At the max-width the container will expand to 90em's. This fit's 6 boxes per line perfectly. As the window sizes down and boxes are bumped to lower rows it leaves an ugly gap with the navigation above. I would like to force the container of the boxes to center them at all times.
To illustrate:
At full width: http://cl.ly/7393a462f44b8315aaba
At smaller width: http://cl.ly/ff48a18d39c4f57c3513
How I would like smaller width to work: http://cl.ly/ae9c3fd04df515253b2d (Photoshoped)
My markup looks like this:
Biodesign
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.
Biodesign
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.
Biodesign
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.
Biodesign
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.
Biodesign
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.
Biodesign
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.
Biodesign
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.
My CSS, is:
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;
}
The #bricks is inside a #main, which looks like:
div#main {
margin:0 auto;
padding:0 50px;
position:relative;
max-width:90em;
}
Would love some ideas!
