Search code examples
cssalignment

CSS inline-block fixed width tiles

I'm building a tile-based portfolio Wordpress theme, and I can't get the tiles to center correctly in their parent div. Here's the static page (I'm migrating from .cu.cc asap). I've used inline-block to align them all on one row, and there are margin styles to keep the gaps between the tiles, but what I'm getting is this (red lines added):

Faulty Align

I'd like to align the tiles flush to the red lines - how can I do it?

Here's a boiled down version of the HTML:

<div class="content-wrapper">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>

And the CSS:

.content-wrapper{
width: 678px;
margin-top: 66px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.tile{
display:inline-block;
width: 182px;
height: 295px;
background-color: #e1e1e1;
border: solid 1px rgba(176,176,176,0);
margin-bottom: 64px;
margin-right: 35px
}

Thanks, Oliver

Solution

  • I'll add to Karl-André's answer by noting that :last-child is not supported in IE8, so it would be nice to switch to

    .content-wrapper .tile {
   margin-left: 10px;
}
.content-wrapper .tile:first-child {
   margin-left: 0px;
}

    Even more clever decision is to use the following:

    .content-wrapper .tile + .tile {
   margin-left: 10px;
}

    Just three lines instead of six, elegant and works everythere.

    Also, if you're bored of manually typing margin and want justify-like behaviour, consider Fluid width with equally spaced DIVs.