Home/ Questions/Q 9320423
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-19T03:37:53+00:00

I am creating a fix layout (960px wide) for my web-template. But I want

  • 0

I am creating a fix layout (960px wide) for my web-template. But I want my menu-bar’s width as the width of the browser (which means, as wide as possible without margins).

CSS for body :

body{
    width:960px;
    min-width:960px;
    margin:auto auto;
}

How can i do that ?

A layout like this : http://www.google.com/analytics/index.html
(notice the fixed width of body and the menu bar is wider than that)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What I think you want is to have your content in the 960px region centered, but have the ability to have other content (your menu in this case) that can be the full size of the page. To be able to do that, you can’t have the width of the body itself set like you do. Instead, you should have some HTML like:

    <html>
<head>
  :
</head>
<body>
  <div id="ContentBox">
    : put your content here
  </div>
  <div id="Menu">
    : Menu content here
  </div>
</body>
</html>

    Then in your CSS:

    #ContentBox {
  margin: 0 auto;
  width: 960px;
}
#Menu {
  /* Whatever is applicable */
}

    As for the Google Analytics site, they have separate sections of the page at full width, with the color, borders, etc. defined, then a region just like #ContentBox I described above in each section. You can even make it a common class and reuse it, like:

    <body>
  <div id="HeaderBar">
    <div class="ContentBox">
      :
    </div>
  </div>
  <div id="GreyBGRegion">
    <div class="ContentBox">
      :
    </div>
  </div>
</body>

    CSS:

    #HeaderBar {
  border-bottom: #CCCCCC 1px solid;
  background-color: #000000;
  color: #FFFFFF;
}
#GreyBGRegion {
  border-bottom: #CCCCCC 1px solid;
  background-color: #F0F0F0;
  color: #000000;
}
.ContentBox {
  margin: 0 auto;
  width: 960px;
}
    • 0