I have this layout problem. I'm trying to make a layout that has Header, foother and a container. Inside the container there are 4 divs called Left_bar, Right_bar, file_view and main_content.
Header and footer are set to a fixed height. But i want the container to be min 500px height and be higher if that is neccessary. I have tried to set the container to min-height:500px and all the divs inside the container too height:100%, it didnt work.
What would be the best way to accomplish this. Basicly the container should varible the height accordance with the contants in the main_content div. All the other divs in the container should have the same height.
Please see the following code and screenshot
<html>
<head>
<title></title>
</head>
<body>
<form>
<style type="text/css">
body
{
padding: 0px;
width:1000px;
margin: 0px auto;
margin-top:5px;
}
#header
{
background: red;
height: 30px;
margin-bottom:5px;
font-size:30px;
text-align:center;
border:solid 1px;
}
#left_bar
{
background: blue;
width:40px;
float:left;
margin-right:5px;
border:solid 1px;
height:100%;
}
#file_view
{
background: yellow;
width:150px;
float:left;
margin-right:5px;
border:solid 1px;
height:100%;
}
#main_contant
{
background: orange;
float:left;
width:747px;
margin-right:5px;
border:solid 1px;
height:100%;
}
#right_bar
{
background: cyan;
width:40px;
float:right;
border:solid 1px;
height:100%;
}
#footer
{
background: purple;
height: 20px;
clear:both;
text-align:center;
color: white;
border:solid 1px black;
}
#container
{
height:500px;
margin-bottom:5px;
}
#clear
{
clear:both;
}
</style>
<div id="header">Header</div>
<div id="container">
<div id="left_bar">Left bar</div>
<div id="file_view">File view</div>
<div id="main_contant">Main contant</div>
<div id="right_bar">Right bar</div>
<div id="clear"></div>
</div>
<div id="footer">Þetta er footer fyrir síðuna</div>
</form>
</body>
</html>