Hi,
You can't have multiple nested elements of 100% height unless the parent has a fixed height in pixels. The height collpases to auto (see faq on 100% height).
You can place your image in respect of the 100% height container but you will need to place it there absolutely and use some html to achieve this.
Something like this:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* Colours
navi green - #749354
border green - #336304
navi hover - #d0dfc0
*/
/* ------------------ html overrides ---------------- */
html,body {
height:100%;
min-height:100%;
}
body {
background-image: url(images/bg.jpg);
margin: 0px;
padding: 0px;
font-family: "Trebuchet MS";
font-size: 1em;
}
h1.header {
padding: 152px 0 0 0;
overflow: hidden;
background-image: url(images/header.jpg);
background-repeat: no-repeat;
height: 0px !important;
height /**/:152px;
margin: 0;
border-bottom: 3px solid #336304;
width: 770px;
}
/* ---------------- ID Tags ---------- */
#container {
width: 770px;
min-height: 100%;
border-right: 3px solid #336304;
border-left: 3px solid #336304;
text-align: left;
margin: 0px auto;
background-image:url(images/navi_bg.jpg);
background-position: top left;
background-repeat: repeat-y;
background-color: #fff;
position:relative;
}
* html #container {
height: 100%;
}
#content {
width: 610px;
min-height: 100%;
text-align: left;
margin: 0px auto;
padding-left: 160px;
position: relative;
z-index:99;
}
* html #content {
height: 100%;
margin: 0;
}
.base{
background-image: url(images/leaf_bg.jpg);
background-position: bottom right;
background-repeat: no-repeat;
position:absolute;
bottom:0;right:0;
z-index:1;
width:545px;
height:274px;
}
#navigation {
width: 150px;
padding: 8px 0 0 0;
font-size: 0.8em;
position: absolute;
top: -20px;
left: 0;
}
* html #navigation {
top: 0px;
}
/* --------------- class tags ------------------ */
.clear {
clear: both;
height:1px;
font-size:0;
}
</style>
</head>
<body>
<div id="container">
<h1 class="header">header header header</h1>
<div id="content">
<div id="navigation">
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
</div>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
</div>
<div class="clear"></div>
<div class="base"></div>
</div>
</body>
</html>
You need height in the clear div in order to clear in older mozilla and use a div instead of a span or you could have problems clearing.
You would also be better off floating your left column instead of absolute positioning in case it is ever longer than the right content or longer than its container.
Originally Posted by all4nerds
Bookmarks