Simple div with header,footer and body

Question

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:

Answer 1

You need to simplify your approach. I put the drop-shadow and rounded corners on a div.container, and then mirror the rounded corners as applicable (top and bottom) so you don't have blocky overlaps. I also added some min-height and max-height values, with overflow: auto on the .mainbody element.

.container {
    width: 500px;
    max-height: 500px;
    margin: 10px;
    border: 1px solid #fff;
    background-color: #ffffff;
    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;
}
.mainbody,
.header,
.footer {
    padding: 5px;
}
.mainbody {
    margin-top: 0;
    min-height: 150px;
    max-height: 388px;
    overflow: auto;
}
.header {
    height: 40px;
    border-bottom: 1px solid #EEE;
    background-color: #ffffff;
    height: 40px;
    -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 {
    height: 40px;
    background-color: whiteSmoke;
    border-top: 1px solid #DDD;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

<div class="container">
    <div class="header">Header</div>
    <div class="mainbody">
        <p>Body</p>
    </div>
    <div class="footer">Footer</div>
</div>
<div class="container">
    <div class="header">Header</div>
    <div class="mainbody">
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
    </div>
    <div class="footer">Footer</div>
</div>

<div class="container">
    <div class="header">Header</div>
    <div class="mainbody">
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
    </div>
    <div class="footer">Footer</div>
</div>

http://jsfiddle.net/VzGAy/2/

Answer 2

The position:absolute property removes your div from the natural flow of your document, thus leaving it to manual positioning that has to be modified every time. So, just let it flow naturally and contain your divs inside a container with the rounded effects you want, this way you can highly simplify your css and more easily manage your document, like so:

HTML

<div class="container">
    <div class="header">
        header
    </div>
    <div class="mainbody">
        main body
    </div>
    <div class="footer">
        footer
    </div>
</div> 

CSS

.container:before, .container:after {
    display:table;
    content:"";
    zoom:1 /* ie fix */;
}

.container:after {
    clear:both;
}

.container {
    width:500px;
    margin:0 auto;
    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;
}

.mainbody {
    height:250px;
    width:500px;
    border: solid #eee;
    border-width:1px 0;
}


.header, .footer {
    height: 40px;
    padding: 5px;
}


.footer {
    background-color: whiteSmoke;
    -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;
}

Demo: http://jsfiddle.net/n6pSm/