CODEWITHSUNDEEP
htmlcss
TheCarver
TheCarver

Reputation: 19733

CSS - align center

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?

Upvotes: 1

Views: 15532

Answers (5)

DWQQ
DWQQ

Reputation: 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.

Upvotes: -1

ANeves
ANeves

Reputation: 6395

"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

Upvotes: 0

Prnth
Prnth

Reputation: 143

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;

Upvotes: 3

dg90
dg90

Reputation: 1263

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;
}

Upvotes: 3

Chowlett
Chowlett

Reputation: 46685

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;

Upvotes: 1

Related Questions