How do I center my web page to always take up the same amount of space?

Question

Just like www.stackoverflow.com for example, only uses the centre of the page while retaining the header at the top. See my layout so far - it uses the whole screen whether its resized or maximised. So basically I want to retain the header at all window sizes, but use only the centre of the page for the other 3 divs.

enter image description here

You need to wrap another div with class lets say wrapper around elements like header, left, right, footer and then in css put it as .wrapper{width:850px; /*desired width*/ margin:0 auto;} — Pravin W, Apr 03 '14 at 13:10
look up dynamic liquid layout http://www.dynamicdrive.com/style/layouts/category/C13/ — TheBetaProgrammer, Apr 03 '14 at 13:12
possible duplicate of [How do you easily horizontally center a
using CSS?](http://stackoverflow.com/questions/618097/how-do-you-easily-horizontally-center-a-div-using-css) — T J, Apr 03 '14 at 13:13

Michael · Accepted Answer · 2014-04-03T13:33:43.290

First thing you need is some wrapping element that "contains" the entire website. For example...

HTML

<body>
<div class="wrapper">

<!-- REST OF SITE HERE (OR ANYTHING YOU WANT CENTERED -->

</div><!-- END WRAPPER -->
</body>

Then some simple CSS... The wrapper element MUST have some width that you define, and a specific margin code. If the site is responsive, you want a dynamic width, with an additional max-width. In the code below, it is the margin: 0 auto; that actually does the centering. It's important to note the width however. If you have 100% width, without a max-width also declared, then the "centering" isn't noticeable as the div takes up 100% of the width of whatever element contains it.

CSS

.wrapper {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

If you don't want the entire website to be centered, simply change your HTML a little bit, and maybe your class name so that it makes more sense in the context that it is being used... For example, if you want just the content area to be centered...

HTML

<body>
<header></header>

<div class="content-wrapper">

<!-- ALL OF YOUR CONTENT HTML HERE -->

</div><!-- END CONTENT WRAPPER -->

<footer></footer>
</body>

CSS

.content-wrapper {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

score 1 · Answer 2 · answered Apr 03 '14 at 13:12

It's always a good practise to wrap your container in any kid of wrapper (say div) and then asssign css margin: 0 auto; so that it centrally alligns to the screen. Eg:

 <div class="wrapper">

      All the stuff in here

 </div>

.wrapper{ margin: 0 auto; // Along with other reset style sheets }

Luca Detomi · Answer 3 · 2014-04-04T07:41:18.877

1

I suggest you to use calc() in css. Differently from other solutions proposed by others, with the following code:

.wrapper
{
   width:calc(100% - 50px);
   margin:0 auto;
}

you can have wrapper div always centered and primarily flidly adaptable to Browser window width, leaving always the same amount of px to both margins. So if you change window width, it will be only the width of Wrapper that will change and not it's margins from sides.

UPDATE: For IE8 retro-compatibility, there are some js polyfills, like:

edited Apr 04 '14 at 07:41

answered Apr 03 '14 at 13:35

Luca Detomi

5,564
7
52
77

Important to note that calc() in css has limited browser support. – Michael Apr 03 '14 at 13:38
Sure, but support is increasing quickly ;-) please look at [Calc()](http://caniuse.com/#feat=calc) – Luca Detomi Apr 03 '14 at 14:05
Increasing quickly for Chrome, Firefox and other mobile browsers, sure. IE8 however will never support it natively, if IE8 is a requirement this is a pretty big issue. – Michael Apr 03 '14 at 14:25
You're right, but for IE8 exists js polyfills such as: * [Calc-Polyfill](https://github.com/closingtag/calc-polyfill) * [PolyCalc](https://github.com/CJKay/PolyCalc) – Luca Detomi Apr 03 '14 at 14:42
Which should be included as part of your answer. – Michael Apr 03 '14 at 16:06

score 0 · Answer 4 · answered Apr 03 '14 at 13:13

0

Set width of the header to 100% and the width of the container to e.g. 80% with margin:0 auto;

Here is a fiddle

Also, it's a good thing to set margin and padding of the html and body to zero to get rid of the whitespace around your page

answered Apr 03 '14 at 13:13

Karim AG

2,166
15
29

score -2 · Answer 5 · answered Apr 03 '14 at 13:10

You can do a bad trick (but easy) with two divs (the second one inside the first one). The first one will have margin-left 50% and, only if you know the widht px of your page, the second div will have margin-left: -ZZZpx, being ZZZ the half of your width size.

How do I center my web page to always take up the same amount of space?

5 Answers5