CODEWITHSUNDEEP
htmlcsslayoutpositioning
UAMoto
UAMoto

Reputation: 271

How to position content above the header and footer

The positioning I want to acheive: enter image description here

Now I have the following: enter image description here

The properties are following:

.header, .footer {
    background: #666;
    height: 100px;
}

.content {
    background: #ccc;
    margin: -25px auto;
    min-height: 500px;
    width: 960px;
}

So the problem that the content lays below the footer and I don't know how to fix it. z-index doesn't work.

My HTML:

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

Upvotes: 1

Views: 302

Answers (2)

bob
bob

Reputation: 17

This example is similar.

3 <div> => middle <div> overlaps upper and lower <div>

Upvotes: 0

Zoltan Toth
Zoltan Toth

Reputation: 47667

Try this

.header, .footer {
    background: #666;
    height: 100px;
    position: relative;
    z-index: 1;
}

.content {
    background: #ccc;
    margin: -25px auto;
    min-height: 500px;
    width: 960px;
    position: relative;
    z-index: 100;
}

Upvotes: 4

Related Questions