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 Code:

<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:

Code:

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;
}

Thread: define height inbetween 2 fixed objects

Thread Tools

Search Thread

define height inbetween 2 fixed objects

Bookmarks

Bookmarks

Posting Permissions