Simple Layout

[dvannoy]

I'm trying to create a simple layout to be used on an asp.net master page. I would like the header and menu to stay in position while the content scrolls up or down. Also the footer to stay at the bottom of the page at all times

Example of what I'm looking to do

-----------------------------------------------
| HEADER |
| |
-----------------------------------------------
-----------------------------------------------
| MENU |
-----------------------------------------------
-----------------------------------------------
| CONTENT |
| |
| |
| |
-----------------------------------------------
-----------------------------------------------
| FOOTER |
-----------------------------------------------

I have tried setting the z-index for the div's but some of them won't even show up. any help would be appreciated. Thanks


.header {
position: fixed;
background-color: #4C6A92;
margin: 0;
padding: 0;
width: 100%;
top:0;
z-index:1;
height:50px;
}
.menu {
position:absolute;
background-color: black;
width: 100%;
text-align: center !important;
z-index:2;
}
.content {
position:relative;
width: 100%;
min-height:1200px;
background-color: green;
margin: 0 0 0 0;
}
.footer {
position: relative;
bottom:0;
width: 100%;
height: 30px;
background-color:#4C6A92;
}

 

[vacunita]

Since you did not provide the HTML you are using, I assumed 4 independent non nested divs with some form of content(otherwise they may not appear). As such, something like this should work:

.header {
position:fixed;
background-color: #4C6A92;
margin: 0;
padding: 0;
width: 100%;
top:0;
z-index:2;
height:50px;

}
.menu {
position:fixed;
background-color: black;
width: 100%;
text-align: center !important;
z-index:1;
top:50px;
color:#fff;
}
.content {
position:relative;
width: 100%;
min-height:1200px;
background-color: green;
margin: 0 0 0 0;
}
.footer {
position:relative;
bottom:0;
width: 100%;
height: 30px;
background-color:#4C6A92;
}

----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech

 

[dvannoy]

Thank you
sorry for not posting the markup, it's basically just a blank page I'm starting with.

Should I wrap all the div's into another div as a wrapper ?

 

[vacunita]

Should I wrap all the div's into another div as a wrapper ?

You can if you want to, but its not necessary.

----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech