Divs: Equal Horizontal Distance

Question

I am creating a site with four images on the main page used as navigation, with a large image below.

<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 sections are 160 pixels wide.

I would like the images in the top div to be evenly distributed horizontally within the div, and the two outer divs merge with the edges of the image below. I tried floats, margins, indents, etc. For a couple of hours I can’t understand.

Thank you for your help!

Answer 1

I would make the first and last divs different.

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

Then your css can apply margin only to imglink .

Your full complement will be 696px - 4*160px = 696px - 640px = 56px . There are three fill areas, 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. In addition, you will need 18px/2 = 9px on the left and right side.

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

Alternatively, you can use the CSS selector 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; } 

Although this is not supported in all browsers.

Answer 2

Here you jump from a place. http://jsfiddle.net/gqf5h/1/

Answer 3

If you know the number of menu items, wrap them in a div. Then set the width of the menu sections as a percentage of the width and set the center of alignment of the text. i.e

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>