CODEWITHSUNDEEP
htmlcsscenter
Batman
Batman

Reputation: 6353

Trying to center fixed menu div on page

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/

Upvotes: 3

Views: 10118

Answers (4)

Jeremy Blanchard
Jeremy Blanchard

Reputation: 11

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!

Upvotes: 1

danwild
danwild

Reputation: 2046

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

Upvotes: 0

Sakthivel
Sakthivel

Reputation: 1938

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/

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

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

Upvotes: 8

Related Questions