Home/ Questions/Q 7523439
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T02:48:10+00:00

Edit 2: It seems clear that no one seems to be able to understand

  • 0

Edit 2: It seems clear that no one seems to be able to understand what I’m asking, so I’ll try to illustrate it;

enter image description here

The area in the center has the id #navigation. This has the following CSS properties,

width: 960px;
margin: auto;
background: #e4bd04;

The reason it has a width of 960px, is because I would like the links in my navigational bar to remain within a 960px limit. I’d also like them centered, so I apply margin: auto. However, this means that my background only flows for 960px. I’d like the background to flow for the entire window width (100% of page), so that users with larger screens don’t end a huge chunk of white space at the top.

In order to prevent this, I nest #navigation into another id, #navouter, to which I apply width: 100%; and background: #e4bd04;, so that the background now appears to extend for the entire width of the window.

Is there any way to do this without using two elements as I’ve done?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve undestood, you don’t want to have 2 div to center another div with fixed width, isn’t it ?

    I don’t think that you’ll love it, but this is a solution :

    .nav {
    width:960px;
    position:absolute;
    left:50%;
    margin-left:-480px; // width / 2
}​

<body>
 <div class="nav">Test content</div>
</body>

    Result for 300px div : http://jsfiddle.net/7GTCc/1/

    Or another, really ugly (lol) :

    .nav {width:960px;}​

<center>
     <div class="nav">Test content</div>
</center>

    Edit regarding your illustration

    “Is there any way to do this without using two elements as I’ve done?”

    No 🙂

    But if you only want the background to be 100%, don’t specify a background (color or url) to your #navigation.

    Last try to answer, test this :

    #navigation {
    min-width:960px;
    text-align:center;
}

    Demo here : http://jsfiddle.net/7GTCc/3/

    • 0