Trying to center fixed menu div on page

Question

I've tried a few different rules but I can get my top menu to center. When I change the position to absolute or relative it does go to the center but then the height goes to 100% for some reason. I don't have a set height because I want the five to be the size of the children.

Here's the HTML:

<div id="topWrapper"> <a href="index.html"> <header id="top_header"> <h1>MacroPlay Games</h1> </header> </a> <nav id="topnav"> <ul> <a href="index.html"><li>Home</li></a> <a href="about.html"><li>About</li></a> <a href="video.html"><li>Trailers</li></a> </ul> </nav> </div>

CSS:

#topWrapper { border:1px solid #00ffff; background-color:#0d0d0d; text-align:center; position:fixed; z-index:9999; width: 850px; margin: 0px auto; float:clear; }

Fiddle: http://jsfiddle.net/kjAAy/

it adjusts to the screen size. On a large enough screen it goes to the left. — Batman
– Batman, Commented Feb 15, 2013 at 6:04
But you have a fixed width of 850px on the header. Perhaps that should be min-width? — Explosion Pills
– Explosion Pills, Commented Feb 15, 2013 at 6:07

Sowmya · Accepted Answer · 2013-02-15 06:02:25Z

8

Add margin:0 auto with left:0px; right:0px

#topWrapper { border:1px solid #00ffff; background-color:#0d0d0d; text-align:center; position:fixed; z-index:9999; width: 850px; margin: 0 auto; left:0px; right:0px; float:clear; }

DEMO

Same method works even for position:absolute

answered Feb 15, 2013 at 6:02

Sowmya

27k21 gold badges102 silver badges137 bronze badges

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

4 Comments

Batman Over a year ago

hmm that's an unexpected solution. It works however. Could you tell me why I needed to add right and left please?

Sowmya Over a year ago

left:0; right:0 removes the default alignment of the absolute div. So you can align the div with margin.

Batman Over a year ago

Oh I see. I never would have found that out. Thanks!

yitwail Over a year ago

I keep being surprised at what I don't know about css. Thanks for a great tip

Jeremy Blanchard · Accepted Answer · 2014-10-08 13:37:15Z

I noticed a small error in the original code and also the code for the most popular response from Sowmya.

More specifically, the property in question is "float: clear;", and to my knowledge there's no such thing as "float: clear;"

Unfortunately, since I just created this account I'm unable to correct the error or reply to that post. Which is why I created a new post.

You can check out W3C for float CSS properties here: http://www.w3.org/wiki/CSS/Properties/float

Values listed are "left | right | none | inherit"

Thanks for listening!

Sakthivel · Accepted Answer · 2013-02-15 06:19:40Z

Position="fixed" is not recommended though. <div id="someid" align="center"> --whatever code-- </div>

This would do. I recommend you should read the purpose of position tag. http://www.barelyfitz.com/screencast/html-training/css/positioning/

"The <div> align attribute is not supported in HTML5. Use CSS instead"

danwild · Accepted Answer · 2013-02-15 06:23:44Z

Or you could use:

border:1px solid #00ffff; background-color:#0d0d0d; text-align:center; position:fixed; z-index: 9999; width: 850px; float: clear; left: 50%; /* position halfway from the left of screen */ margin: 0px 0px -425px 0px; /* pull the div into center */ }

Fiddle: http://jsfiddle.net/zXFdN/3/

ps align="center" is not supported in HTML5: http://www.w3schools.com/tags/att_div_align.asp

Collectives™ on Stack Overflow

Trying to center fixed menu div on page

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Related