Reputation: 3679
Please take a look at this code
The problems are followings:
Upvotes: 0
Views: 48
Reputation: 1472
For the
1.nav must be at the top of #main, not side by side;
just apply
clear:both
on the main div
2.How can I center #nav inside #container if I don't exact to set exact width for it? Tried margin: 0 auto; no success?
you have to set certain width for this content container by this margin 0 auto will work
update : please take a look if you need the same
Upvotes: 2
Reputation: 92853
Remove unnecessary float
form your #nav
& ul
. Then define width
to your #nav
for example 600px
#nav{
width:600px;
}
#nav ul
{
padding:0px;
margin:0px;
list-style:none;
overflow: hidden;
}
Check this http://jsfiddle.net/JDwjJ/1/
UPDATED
If the width is unknown then you can use display:inline-block
property for this:
#nav {
display:inline-block;
*display:inline/* For IE7*/
*zoom:1/* For IE7*/
}
#container{
text-align:center;
}
#main{
text-align:left;
}
Check this http://jsfiddle.net/JDwjJ/8/
Upvotes: 2