I was recently given the task of redoing our website with a new, more fresh looking design. It's a 3 column, fixed width, centered layout with a header and navbars on both sides and a that extend along with the content (middle) box, and have a minimum height of 100% of the window.
I have tried several aproaches, and made some progress in making the navbars extend, but not the way they should.
here is my css code:
html, body {
height: 100%;
}
body {
overflow: auto;
font-family: Arial, Verdana, Sans-Serif;
margin: 0;
padding: 0;
}
#mainwrapper {
width: 780px;
margin: 0 auto;
padding: 0;
height: 100%;
background-color: #ffffff;
border-left: 1px solid red;
border-right: 1px solid red;
}
#banner {
position: absolute;
width: 780px;
height: 116px;
}
#alpha {
float: left;
width: 138px;
height: 100%;
padding-left: 15px;
padding-right: 15px;
background-color: #0071b7;
}
#beta {
float: right;
width: 170px;
height: 100%;
background-color: #afd451;
}
#content {
float: left;
width: 412px;
min-height: 100%;
text-align: left;
padding: 0 15px;
}
#content_padding {
margin-top: 121px;
}
#ghost {
clear: both;
}if I change height for the mainwrapper into min-height, the navbars extend to accommodate the new height but this is only 100% of the window.
I understand that in order for the child to extend, the parent needs to be given a height as well, but in this case that would mean the mainwrapper doesn't extend together with the content box.
can anyone help my with this problem?
