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:

Upthrust

@All-Thanks for your support guys you made me to think different each one in the diff way. – Upthrust

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/

Muzhik

And the max-height on .mainbody should be max-height: 388px;, so it doesn't push the .footer down before overflow/scroll: jsfiddle.net/VzGAy/2 – Muzhik

Note as well that the previous jsFiddles have a CSS Reset applied (Normalized CSS checkbox on the right). To see what it looks like without that applied, see: jsfiddle.net/VzGAy/3 – Muzhik

@Jared-Thanks for mentioning it. – Upthrust

how to make it span whole page – Brannan

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/

Floorage

What's the point of the :before, :after and clear: both? I agree a container helps, but I don't see what the value of the first class definitions is supposed to be. – Muzhik

@JaredFarrish inline clearfix, so, proper containment. – Floorage

I understand what's it's supposed to do; why have you included it when it doesn't seem to have any affect? Am I missing something that you're anticipating? – Muzhik

From the clearfix page: Including the :before selector is not necessary to clear the floats, but it prevents top-margins from collapsing in modern browsers. This ensures that there is visual consistency with IE 6/7 when zoom:1 is applied. So, proper containment/placement consistency across browsers is your answer. – Floorage

I guess I'm just missing it, but that seems like circular logic. There's no floats to clear in the example markup. – Muzhik

@JaredFarrish Its all about proper containment, without it the container class would be incomplete. What we have here is a layout, once you start getting the content inside of the layout proper clearing and containment does become an issue, so i always compensate for that. So, a proper container would be incomplete without proper clearing, and it is why i add it everytime. – Floorage

I can understand that (best practice); otherwise it looks out of place. Thank you for the explanation. :) – Muzhik

@JaredFarrish well, not out of place, i'd still call it proper containment, if its not properly cleared why even use a container class at all? a wrapper class would suffice. – Floorage

Answer 3

This could do what you need: http://jsfiddle.net/FZGL4/

.mainbody
{
    min-height: 250px;
    width: 500px;
}


.header
{
    height: 40px;
    width: 500px;
    border-bottom: #000 1px solid;

}


.footer
{
    height: 40px;
    width: 500px;
    border-top: #000 1px solid;       
}​

Enervated

Answer 4

dont know whether this would fit your needs .. but,check out.. http://jsfiddle.net/aFgDN/1/

.header
{
position:fixed;
height: 30px;
background-color: yellow;
width: 500px;
}
body{
margin:0;
padding:0;
height:100%;
width:100%;
    overflow:hidden;

}
.mainbody{
position:fixed;
top:30px;
bottom:40px;
min-height:250px;
width:500px;
border:1px solid black;
background-color:red;
}
.footer{
width:500px;
position:fixed;
bottom:0;
height:40px;
background-color: blue;

}

This would be your html ..

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

have removed other things from your css -- you can add it later..

Enginery

Answer 5

I made some tweaks to your CSS:

http://jsfiddle.net/Cx4qG/

Chlamydeous