CSS - align center

Question

I'm finally trying to do away with tables and use CSS.

I have 3 DIVs that make up a three layered layout: header, body and footer. I'm now trying to overlay a 900px wide DIV on top of these layers, center aligned, which will hold some of my content and navigational buttons.

These are the 3 layers:

enter image description here

And this (done in Photoshop), is what I am trying to achieve but transparent to the eye:

enter image description here

My 3 base layers are coded like this:

<div id="main" style="width:100%; z-index:1; position:relative;">
    <div id="header" style="width:100%; height:175px; text-align:center; background:#151515; z-index:1;"></div>
    <div id="contents" style="width:100%; height:400px; position:relative; background:#FFF; z-index:1;"></div>
    <div id="footer" style="width:100%; height:200px; position:relative; background:#151515; z-index:1;"></div>
</div>

I did manage to get a new layer to sit on top but it wasn't center aligned. Could somebody please point me in the right direction?

A few tips: 1) By default DIVs are all 100% width unless told otherwise. 2) position:relative is used to set a new anchor point for absolutely-positioned children - you have none. — Diodeus - James MacFarlane, Jan 23 '12 at 16:11
Thanks for the tips @Diodeus, much appreciated. I removed the absolutely positioned children for this example, but useful to know width is 100% as default.. — TheCarver, Jan 23 '12 at 16:14

score 3 · Accepted Answer · answered Jan 23 '12 at 16:12

3

Somehting like this could help:

JSFiddle: http://jsfiddle.net/DSH5J/

Add:

<div id="square"></div>

#square {
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:0 auto;
    margin-top:50px;
    width:80%;
    height:100%;
    background-color:#333;
    z-index:10;
}

answered Jan 23 '12 at 16:12

dg90

1,243
3
17
30

@ANeves - Could explain what you meant please? – TheCarver Jan 23 '12 at 16:24
That's not my code ANeves ;-) I just placed the square. He meant if you add text to the div with id #contents the text goes over the footer div. That's because you are working with absolute height (400px, 175px, 200px) – dg90 Jan 23 '12 at 16:26
@daageu - do you know what he/she meant by that? Have I got something wrong in my original code? – TheCarver Jan 23 '12 at 16:30
@MartinG if it works for you it then works for you, great! :) But this is what I mean, look at the text: http://jsfiddle.net/DSH5J/10/ – ANeves Jan 23 '12 at 16:30
1

Ah that's okay, nothing is actually going in those base layers. I should re-id them as top, middle and bottom, instead of contents. All the content will be going in the the new top layer. I want the effect of full page (100% base layers) but content is restricted to 900px. If that makes any sense :) – TheCarver Jan 23 '12 at 16:36

score 3 · Answer 2 · answered Jan 23 '12 at 16:13

3

Set the width and set margin-left and margin-right to auto. That's for horizontal only, though. If you want both ways, you'd just do it both ways.

margin-left:auto;
margin-right:auto;

answered Jan 23 '12 at 16:13

Prnth

143
1
1
9

Oh yeah... see my own question http://stackoverflow.com/questions/4955122/what-exactly-is-needed-for-margin-0-auto-to-work – Chowlett Jan 23 '12 at 16:14

score 1 · Answer 3 · answered Jan 23 '12 at 16:10

1

Easiest way that I know of to centre a div of known width is to give it the following styles:

position: absolute;
left: 50%;
width: 900px;
margin-left: -450px;

answered Jan 23 '12 at 16:10

Chowlett

45,935
20
116
150

score 0 · Answer 4 · answered Jan 23 '12 at 16:50

"Putting my money where my mouth is": http://jsfiddle.net/YVmBU/2/

HTML:

<div id="main">
    <div id="header"></div>
    <div id="contents-box">
        <div id="contents">
            <p>Some text</p>
            <p>etc</p>
            <p>etc</p>
            <p>etc</p>
            <p>etc</p>
            <p>etc</p>
        </div>
    </div>
    <div id="footer"></div>
</div>

CSS:

#main {
}
#header {
    position: relative;
    height:100px;
    background:#151515;
    z-index: -1;
}
#contents-box {
    border: dashed grey 1px; /* for understanding only, remove it in the end */
    z-index: 1;
    margin-top: -30px;
    margin-bottom: -30px;
    /* TODO: address min-height; try only one line of text. */
    /* fixed height would work too, but would not let the box stretch dynamically */
}
#contents {
    width: 75%;
    height: 100%;
    margin: 0 auto;
    background: grey;
    z-index: 1;
}
#footer {
    position: relative;
    height:75px;
    background:#151515;
    z-index: -1;
}

The only problem is with few text content: if min-height is used on #content, then the grey background does not stretch when there is few text; if a static height of N px is used, then the box does not stretch dinamically.

But if the two black bars merging when there is few content is not important, then ignore it.

Remove the grey dashed border and grey background; those are helpers - to know where each box is and understand what is happening.

By the way, the position: relative needs to be there on the z-index: -1; layers, otherwise the background does not go under. Read on position: this is because things in html have position: static by default, and z-index relies on position for its behaviour.
You can read about this in this page: http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp

score -1 · Answer 5 · answered Nov 05 '13 at 09:33

-1

The only problem is with few text content: if min-height is used on #content, then the grey background does not stretch when there is few text; if a static height of N px is used, then the box does not stretch dinamically.

But if the two black bars merging when there is few content is not important, then ignore it.

answered Nov 05 '13 at 09:33

DWQQ

1

This answer states what is wrong with the OP's code but does not provide an answer. In addition, this entire statement was stolen, word for word, from @ANeves answer below. -1, neither answers the question nor is your own answer. – Cannicide Oct 05 '19 at 17:09

CSS - align center

5 Answers5