PDA

View Full Version : define height inbetween 2 fixed objects



kimikai
06-06-2012, 08:47 AM
My website is nearing its end, and im now working on the fluidity of the space where my menu and text will be.

My website is setup with a header (fixed height) and a footer (fixed) that will stay at the top and bottom all the time.
now theres a space inbetween those 2, that i need to fill up with the content area so to speak. And im not sure with what style i would have to do this. like with height 100% or something.
I think theres a problem with the mid piece (everything between <div id="wrapper_content"></div>) but i just cant figure what went wrong... it seems like wrapper_menu and content arent positioned INSIDE wrapper_content. just...how am i going to fix this?

this is the HTML of my website:



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Himalaya-Fluid</title>
<link rel="stylesheet" type="text/css" href="styletest.css" />
</head>

<body>

<div id="wrapper_header">
<div id="header">
<div id="wrapper_headergradl">
<div id="wrapper_headergradr">
<h1>&nbsp;</h1>
</div>
</div>
</div>
</div>

<div id="wrapper_content">
<div id="wrapper_menu">
<div id="menu">
<iframe name="menu" src="menu.html" frameborder="0" width="160px" height="100%" allowtransparency="true" scrolling="auto"></iframe>
</div><!--menu-page-->
</div>
<div id="content">
<iframe name="content" src="home.html" frameborder="0" width="100%" height="100%" allowtransparency="true" scrolling="auto"></iframe>
</div>
</div>

<div id="wrapper_footer">
<div id="footer">
Design door Daisy Nabben | Alle rechten voorbehouden Himalaya Hills 2012
</div>
</div>

</body>
</html>


This is the CSS:



html, body {
height:100%;
margin:0 auto;
}

html {
overflow:hidden;
}

/* Page width */
#header, #wrapper_content, #wrapper_footer {
width: 80%;
margin: 0 auto;
}

/* Banner style */
#wrapper_header {
background:transparent url('images/bg.png') top center repeat-x;
}

#header {
background:#fff url('images/bannerfluidkleiner.jpg') top center no-repeat;
}

#wrapper_headergradl {
background: transparent url('xxx.png') top left no-repeat;
}

#wrapper_headergradr {
background: transparent url('xxx.png') top right no-repeat;
}

#header h1 {
margin:0px;
height: 214px;
}

/* Wrapper content styles */
#wrapper_content {
height:inherit;
background: white url('images/bg02-white-left.png') no-repeat left top;
}

/* Menu styles */
#wrapper_menu {
float: left;
width:180px;
height:60%;
margin-left:20px;
margin-top:10px;
background: #00F; url('images/menu.png') no-repeat;
}

#menu {
height:100%;
margin-left:10px;
margin-right:20px;
background:#0F0;
}


/* Content styles */
#content {
float:right;
width:75%;
height:60%;
margin-top:10px;
background: transparent url('images/bg02-white-right.png') no-repeat right top;
}

/* Footer style */
#wrapper_footer {
text-align: center;
position:fixed;
left:10%;
bottom:0px;
}

#footer {
margin: 0 20px;
text-align:center;
background-color: #e5f0fc;
border: 1px solid #ccc;
border-bottom: 0;
clear: both;
}