CODEWITHSUNDEEP
htmlcss
samwick
samwick

Reputation: 167

how to stretch a navigation so it takes over the whole div

I have a nav div with following properties:

#nav {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}

but when I put in a navigation bar in it ..it is not stretching for the whole width of 960px

link: here

Upvotes: 0

Views: 2290

Answers (2)

Marcus
Marcus

Reputation: 460

Add these rules to your stylesheet:

#nav > ul {width: 100%;}
#nav > ul > li {width: 25%;}

Upvotes: 1

wsanville
wsanville

Reputation: 37516

Add this rule to your stylesheet:

.sf-menu { width: 100%; }

That will make your ul tag take the full width of your #nav div. I'm not sure if this is exactly what you're looking for, or if you want each li to take the full width.

If you want each li element to be evenly stretched across the full width, in your case with 4 elements you can simply set the width of them to 25%. For variable amount of li tags, I'd have to think about it some more...

.sf-menu li { width: 25%; }

Upvotes: 1

Related Questions