Hi,
I am trying to code my mainlayout. When every divs height is % there is no problem. But I have a header and a footer which has to have a fixed height like 60px for top and 30px for footer. This is where I experience a problem which I have been trying to solve for hours. Here is how I set my layout’s heights.
My css file
*/ I have this code at the top /*
html,body {
background:#fff;
margin:0;
padding:0;
color:#000;
height:100%;
}
*/ Than I have this main div which contains other divs /*
#main_div {
width:100%;
height:100%;
background:#808080;
color:#fff;
padding:0px;
margin:0px;
}
*/ My header /*
#header_div {
width:100%;
height:60px;
background:#fff url("images/top_bg.gif");
color:#fff;
padding:0px;
margin:0px;
}
*/ My main content div which stays between header and footer/*
#maincontent_div {
width:100%;
height:89.4%;
background:#000;
color:#fff;
}
#content1_div {
width:100%;
height:20%;
background:#fff;
}
#content2_div {
width:100%;
height:70%;
background:#000;
}
*/ My footer /*
#footer_div{
width:100%;
height:30px;
background:#fff url("images/footer_bg.gif");
color:#fff;
padding:0px;
margin:0px;
}
And this is the code in the html
<div id="main_div">
<div id="header_div">
</div>
<div id="maincontent_div">
<div id="content1_div">
</div>
<div id="content2_div">
</div>
</div>
<div id="footer_div">
</div>
</div>
What should I do for this design to fit different resolutions?
by the way you can visit the page at (currently it fits 1280*1024)
http://www.abus.terzzi.com/menu/1.htm
Best Regards