0

Just a quick question:

I have this html:

<div class="container">
  <div id="header">
   <div id="navbar">
   </div>
  </div>
</div>

and CSS:

.container {
    position: relative;
    text-align: left;
    width: 100%;
    background-color: yellow;
}

#header {
    position: relative;
    background-color: red;
    height: 120px;
    width: 960px;
    margin: auto;
}

My header (red container is stretched from left to right 100%) but I want it to be in a middle width given width; Help me please =)

3
  • I don't understand what you mean by "in a middle width given width".
    – bookcasey
    Oct 21, 2012 at 16:35
  • 1
    It's already in the middle o_O
    – HamZa
    Oct 21, 2012 at 16:37
  • @bookcasey i think he meant "i want it to be in the middle with given width"
    – HamZa
    Oct 21, 2012 at 16:39

3 Answers 3

3

try the css in

 #header{ margin:0 auto;}

jsFiddle

1
  • i reduced the width of #header in fiddle so that you can easily see Oct 21, 2012 at 16:36
2

You probably want to do

#header {
margin-left:auto;
margin-right:auto;
}

That'll center the div horizontally.

0
1

You can either do

#header{margin:0 auto;}

Or

#header{position: absolute; left:50%; margin-left: -480px;}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.