Divs: Equal Horizontal Spacing

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开发者_如何学Python 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!

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.

Here's a jumping off point for you. http://jsfiddle.net/gqf5h/1/

If you know the number of menu items, wrap each one in a div. Then set your menu div widths to a percentage of the width and set text-align center. ie

for 4 menu options :

css

#menu div{
  width:25%;
  text-align:center;
  display:inline-block;
}

html

<div id='menu'>
  <div><a href='#'>link</a></div>
  <div><a href='#'>link</a></div>
  <div><a href='#'>link</a></div>
  <div><a href='#'>link</a></div>
</div>