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