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:
This could do what you need: http://jsfiddle.net/FZGL4/
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 somemin-height
andmax-height
values, withoverflow: auto
on the.mainbody
element.http://jsfiddle.net/VzGAy/2/
dont know whether this would fit your needs .. but,check out.. http://jsfiddle.net/aFgDN/1/
This would be your html ..
have removed other things from your css -- you can add it later..
I made some tweaks to your CSS:
http://jsfiddle.net/Cx4qG/
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
CSS
Demo: http://jsfiddle.net/n6pSm/