CODEWITHSUNDEEP
csscss-floatmargin
tbthorpe
tbthorpe

Reputation: 783

Align floated divs to fill an entire space

So I have a div, 720px wide, and i'm filling it with divs that are 140px wide, floated left. I would love to be able to line these divs up flush with the left and right edges of the containing div.

Of course, the issue is that when I put a margin-right on the floated divs, the right edge won't line up due to that margin. A left margin yields the same results, but on the left edge.

Is there any way to combat this issue?

Upvotes: 3

Views: 266

Answers (2)

John
John

Reputation: 1540

Try this: Link

You can put the elements into rows and detect first, middle, and last elements with these css2 selectors. You can specify different margins for the different positions inside. 

element:first-child {

}

element:last-child {

}

element .className {
     margin-left: 6px;
}

Upvotes: 3

Fredrik
Fredrik

Reputation: 2016

If you are using a server-side language to generate these divs you can calculate which item is last in the row by doing something like this:

<div class="column <%if iteration % 6 == 0 %>last-in-row<%end%>"></div>

and then just set the style

.column {
   margin-right: 10px;
}
.last-in-row {
  margin-right: 0;
}

Upvotes: 0

Related Questions