CODEWITHSUNDEEP
htmlcssmargin
DarkLeafyGreen
DarkLeafyGreen

Reputation: 70406

Center div container, scrollbar appears

I have following html site structure:

  <body>
    <div id="header"></div>
    <div id="container">    
        <div id="util_header"></div>
        <div id="contentwrapper" class="frontpage">Content</div>
    </div>
  </body>

Now I want to center the #container. The works when I apply following css:

#container {
    width: 960px;
    margin: auto;
    background:red;
}

#util_header{
    width: 100%; height:32px;
    position: relative;
    background:url('../images/logo.png') no-repeat #eeeeee;
    border-top:1px solid #b6bac0;
}

#header {
    width: 100%; height:32px;
    position: absolute;
    background:#eeeeee;
    border-top:1px solid #b6bac0;
}

#contentwrapper {
    float: left;
    position: relative;
    height: auto;
    background:red;
}

The magin: auto; centers the container. My problem is that I need the container to be larger, but when I increase width from 960 to 980 I get a vertical scrollbar. I played around with the css but got no clue how to manage that problem.

Any ideas?

Upvotes: 1

Views: 4170

Answers (1)

Christophe Ebl&#233;
Christophe Ebl&#233;

Reputation: 8161

@ArtWorkAD,

CSS3 introduced the Flexible box model, maybe you can use it depending the audience of your website...

So to Vertically & Horizontally center block Level elements in the body element, you'd just have to write this CSS declaration:

body {
  display: box;
  box-orient: horizontal;
  /* horizontally centered */
  box-pack: center;
  /* vertically centered */
  box-align: center;
  width: 100%;
  height : 100%;
}

http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

edit

To have wide browser support, you can always rely on CSS hacks and do some negative margin trickery as seen on http://www.jakpsatweb.cz/css/css-vertical-center-solution.html ;)

Oh and if you don't want a scrollbar at all, make sure you have put an overflow:hidden on the body element.

Upvotes: 1

Related Questions