Centered grid - inner grid is left aligned - no Javascript - NO Medias Queries
[EDIT]
I am looking for a solution without javascript and no queries on the media network (user can resize container).
[/ EDIT]
I need to create a grid of items.
- The container is flexible in width.
- The grid is always centered
- Items inside the grid must be left aligned
Quite simple, but I can't seem to find a solution!
Here is an image that represents what I need:
And here's a jsfiddle: http://jsfiddle.net/5e4bcc9L/1/
HTML:
<div class="container">
<div class="grid">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
CSS:
.container {
width: 100%;
background-color:#CCC;
text-align: center;
}
.grid {
background-color:#999;
display: inline-block;
text-align: left;
}
a {
display:inline-block;
height: 100px;
width: 100px;
background-color:#000;
margin: 5px;
}
source to share
Given that you don't want to use JavaScript or media queries, this is difficult to achieve exactly the way you want it. The problem is that you are setting the exact heights and widths of your blocks in the grid. I will explain more:
CSS (keeping HTML the same)
.container{
width: 100%;
height:100%;
background-color:#CCC;
text-align:center;
}
.grid{
background-color:#999;
display: inline-block;
position:relative;
width: 80%;
border:1px solid black;
}
.grid a{
display:inline-block;
height: 100px;
width: 100px;
background-color:#000;
margin: 5px;
float:left;
}
.ghost{clear: both;}
If you look at the fiddle, it will work as you described ... until you resize the window. This is because the blocks in the grid cannot float until there is enough room for them, which will result in a "wrong" size lock (for you).
If the left alignment standard can be dropped, you will have a much more enjoyable experience as the focused content is treated as shown here . Just comment out the float in the CSS above to see what I mean.
Otherwise, the web-tiki link above is probably the best option.
source to share