views:

37

answers:

3

Hey guys,

    #menu {
      position:fixed;
      width:800px;
      background: rgb(255, 255, 255); /* The Fallback */
      background: rgba(255, 255, 255, 0.8);
      margin-top:30px;
    }

i know this question is a million times out there, however I can't find a solution to my case. i got a div, which should be fixed on the screen, even if the page is scrolled it should always stay CENTERED in the middle of the screen!

so the div should have 500px width, should be 30px away from the top (margin-top), should be horizontally centered in the middle of the page for all browsersizes and should not move when scrolling the rest of the page.

is that possible?

+2  A: 
left: 50%;
margin-left: -400px; /* Half of the width */
David Dorward
+1 clever, hadn't thought of that!
Pekka
A: 
margin-left: auto;
margin-right: auto;

That should do what you want - it basically adjusts the left and right margins equally to fit into the containing box, thus centering your div. For more info see specs:

http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins

Chris
A: 

... or you can wrap you menu div in another:

    <div id="wrapper">
       <div id="menu">
       </div>
    </div>


#wrapper{
         width:800px;
         background: rgba(255, 255, 255, 0.8);
         margin:30px auto;
         border:1px solid red;
    }

    #menu{
        position:fixed;
        border:1px solid green;
        width:300px;
        height:30px;
    }
Meduza