I need a simple div with header,footer and body content.
The header and footer needs to be fixed and the height of div should be 250px or max 500px and its width is 500px
And my body content should be fluid so that it should extend the content.
Header and footer needs to be 40px.
And I need a horizontal line after header and above footer.
I have done it but I am unable to set its footer as I am going nuts with the alignment.
Can anyone suggest me with this:
CSS:
mainbody
{
position:absolute;
Left:35%;
top:20%;
display:none;
height:250px;
width:500px;
margin-top: 0;
border:1px solid #fff;
box-shadow:0px 2px 7px #292929;
-moz-box-shadow: 0px 2px 7px #292929;
-webkit-box-shadow: 0px 2px 7px #292929;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background-color:#ffffff;
z-index:50;
}
.header
{
height: 30px;
border-bottom: 1px solid #EEE;
background-color: #ffffff;
height: 40px;
width: 490px;
padding: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.footer
{
width:500px;
margin-bottom: 0;
margin-top: 37px;
margin-left:-5px;
background-color: whiteSmoke;
border-top: 1px solid #DDD;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
}
This is what I need: