Having css issue

Question

http://jsfiddle.net/JDwjJ/

Please take a look at this code

The problems are followings:

#nav must be at the top of #main, not side by side;
How can I center #nav inside #container if I don't exact to set exact width for it? Tried margin: 0 auto; no success?

margin:0 auto; will only work if the #nav element has a specified width. — Tieson T.
– Tieson T., Commented Feb 16, 2012 at 7:19
@TiesonT. width of nav is unknown. website is multilanguage, so width changes. How can I center nav without defining exact width or is there any other way for variable width? — heron
– heron, Commented Feb 16, 2012 at 7:21
Without digging into your specific ruleset, I can't say, but it's a hard and fast rule that a browser cannot actually apply an "auto" margin unless the dimensions of the element are known. All "auto" really does is say "split what's left evenly on both sides." — Tieson T.
– Tieson T., Commented Feb 16, 2012 at 7:27

sandeep · Accepted Answer · 2012-02-16 07:27:17Z

2

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/

edited Feb 16, 2012 at 7:27

answered Feb 16, 2012 at 7:15

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

heron Over a year ago

I already told that, width of nav is unknown. website is multilanguage, so width changes. How can I center nav without defining exact width or is there any other way for variable width?

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

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

http://jsfiddle.net/JDwjJ/9/

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 16, 2012 at 7:17

Jack

1,48213 silver badges20 bronze badges

4 Comments

heron Over a year ago

width of nav is unknown. website is multilanguage, so width changes. How can I center nav without defining exact width or is there any other way for variable width?

Jack Over a year ago

@epic_syntax define widht as 100% that wont hurt you in any case, check my updated answer if it's what you need :)

heron Over a year ago

lol.. that will force resive navigation bar to fit parent div width, even if text of navigation menu is not that long

Jack Over a year ago

so I am out now no more guesses :D

Collectives™ on Stack Overflow

Having css issue

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related