Divs: Equal Horizontal Spacing

Question

I'm creating a site that has a series of four images on the homepage used as navigation with a large image beneath.

<div style="width: 696px">
<div class="imglink"></div>
<div class="imglink"></div>
<div class="imglink"></div>
<div class="imglink"></div>
</div>

<div style="width:696px">
...
</div>

The "imglink" divs are 160px wide.

I would like the images in the top div to be horizontally spaced evenly inside the div, with the two outer divs flush with the edges of the image below. I've been trying out floats, margins, padding, etc for a couple hours now and can't figure it out.

Thanks for your help!

Answer 1

I would make the first and last divs distinct.

<div class="imglink_first"></div>
<div class="imglink"></div>
<div class="imglink"></div>
<div class="imglink_last"></div>

Then your css could apply margin only to imglink.

Your total padding would be 696px - 4*160px = 696px - 640px = 56px. There are three padding regions, so each should be 56px/3 = 18.67px. Unfortunately this is not an integer, so you need to round. 18px * 3 = 54px leaving two extra pixels at the end of your div. Also, you will need 18px/2 = 9px per left and right side.

.imglink_first, .imglink, .imglink_last{
   float: left;
}

.imglink{
  margin: 0px 9px;
}

Alternatively, you could use CSS selectors with :first-child and :last-child

<div class="image-row" style="width: 696px">
   <div class="imglink"></div>
   <div class="imglink"></div>
   <div class="imglink"></div>
   <div class="imglink"></div>
</div>

.imglink{
   float: left;
   margin: 0px 9px;
}

.image-row:first-child, .image-row:last-child{
   margin: 0px;
}

Though this is not supported in all browsers.