CODEWITHSUNDEEP
cssalignment
OliverW
OliverW

Reputation: 49

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

Upvotes: 1

Views: 2134

Answers (2)

Fyodor
Fyodor

Reputation: 2843

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.

Upvotes: 2

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

Try adding this :

.tile:last-child{
    margin-right : 0;
}

You div are centered, but the last div margin is messing up the elements

Upvotes: 1

Related Questions