CODEWITHSUNDEEP
htmlcssalignment
ryryan
ryryan

Reputation: 3928

Evenly space links in div

I'm making a simple website for college, which I hate, due to the designing. I'm a php programmer not a designer. (May sound stupid)

I have run into a problem, I have a centered div of 600px then inside <nav> tags I have 4 links. I would like them evenly spaced out, across the div. I have tried setting the margin-left and right but had no luck.

Take a look at it on jsfiddle

Thanks

Upvotes: 2

Views: 5089

Answers (4)

Jeff the Bear
Jeff the Bear

Reputation: 5653

If you remove the margin-right on the nav a it will work. The added spacing on the margin-right is added to the box of the anchor. Here is how the box model works: http://www.w3.org/TR/CSS2/box.html

Note in IE the html5 nav selector doesn't seem to not work correctly. I added a class on the paragraph tag and applied the fix that that tag.

This is what will work in all browsers: http://jsfiddle.net/RkUWU/2/

Upvotes: 1

shamazing
shamazing

Reputation: 730

You can use the following:

nav a{
    width:150px; display:block;float:left;
}

If you want then centered, add:

text-align:center;

Upvotes: 0

Šime Vidas
Šime Vidas

Reputation: 185903

Working demo: http://jsfiddle.net/8jK7N/1/

IE, however, doesn't support styling of the new HTML5 elements. You can use shiv to solve this issue. Working demo (with shiv): http://jsfiddle.net/8jK7N/2/

Upvotes: 4

benhowdle89
benhowdle89

Reputation: 37464

Take the <p> tag out of the <nav> bit, also margin-left 73px and margin-right 73px on each may make the links too wide for one line in your div. I know the math works out but it may be acting strangely.

Upvotes: 1

Related Questions