New to CSS layouts. 100% height bugs

Hi there. I am new to CSS layouts and am trying to do some fairly simple stuff. I messed around with different templates online and added different bits of code here and there so I apologize if this stuff looks sort of rough. I am still getting my mind around it and am trying to leave table layouts behind. So far I am testing on a mac so the main issue is that it shows up fine in Safari but is not 100% height in Firefox. Any comments are welcomed. Thanks very much!

Here's the code:

<html>
<head>
<title>Jordan A. Hutton - Custom Tile and Stone</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

#container {
min-height:100%;
height:100%;
width:760px;
height:auto;
background-image:url(images/gr_white_bg.jpg);
background-repeat:repeat-y;
border-right:thin solid #ccc;
position:relative;
}

#header {
position:absolute;
left:0px;
top:0px;
width:760px;
height:95px;
background-image: url("images/header.jpg");
}

#header_img {
position:relative;
left:20px;
}

#nav_main ul li {
color:#FFFFFF;
display:inline;
list-style-type:none;
font-family: Arial, Helvetica, sans-serif;
letter-spacing:2px;
margin:0 10px 0 0;
font-size: 10px;
font-weight: bold;
}

#nav_main ul li a:hover {
color:#9EA300;
}

#nav_main ul li a {
color:white;
text-decoration:none;
}

#nav_main {
position:absolute;
left:170px;
top:62px;
}

#sidebar {
position:absolute;
left:0px;
top:95px;
width:136px;
height:auto;
background-color:#006600;
}

#content {
position:absolute;
left:136px;
top:95px;
width:624px;
background:white;
height:auto;
}

#body_copy {
position:relative;
left:37px;
width:540px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
line-height: 20px;
letter-spacing:1px;
padding:10;
}

-->
</style>
</head>
<body>
<div id="container">

<div id="header">
<div id="nav_main">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">TESTIMONIALS</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">LINKS</a></li>
</ul>
</div>
</div>

<div id="body_copy">
sdfsdfsd sdfsdfsdf sdfsdfsdfsdf sdfsdfsdf sdfsdfsdfds sdfsdfsdfsdf sdfsdfsdfsd sdfsdfsd sdfsdfsdf sdfsdfsdfsdf sdfsdfsdf sdfsdfsdfds sdfsdfsdfsdf sdfsdfsdfsd
sdfsdfsd sdfsdfsdf sdfsdfsdfsdf sdfsdfsdf sdfsdfsdfds sdfsdfsdfsdf sdfsdfsdfsd sdfsdfsd sdfsdfsdf sdfsdfsdfsdf sdfsdfsdf sdfsdfsdfds sdfsdfsdfsdf sdfsdfsdfsd sdfsdfsd sdfsdfsdf sdfsdfsdfsdf sdfsdfsdf sdfsdfsdfds sdfsdfsdfsdf sdfsdfsdfsd sdfsdfsd sdfsdfsdf sdfsdfsdfsdf sdfsdfsdf sdfsdfsdfds sdfsdfsdfsdf sdfsdfsdfsd sdfsdfsd sdfsdfsdf sdfsdfsdfsdf sdfsdfsdf sdfsdfsdfds sdfsdfsdfsdf sdfsdfsdfsd sdfsdfsd sdfsdfsdf sdfsdfsdfsdf sdfsdfsdf sdfsdfsdfds sdfsdfsdfsdf sdfsdfsdfsd sdfsdfsd sdfsdfsdf sdfsdfsdfsdf sdfsdfsdf sdfsdfsdfds sdfsdfsdfsdf sdfsdfsdfsd sdfsdfsd sdfsdfsdf sdfsdfsdfsdf sdfsdfsdf sdfsdfsdfds sdfsdfsdfsdf sdfsdfsdfsd sdfsdfsd sdfsdfsdf sdfsdfsdfsdf sdfsdfsdf sdfsdfsdfds sdfsdfsdfsdf sdfsdfsdfsd sdfsdfsd sdfsdfsdf sdfsdfsdfsdf sdfsdfsdf sdfsdfsdfds sdfsdfsdfsdf sdfsdfsdfsd sdfsdfsd sdfsdfsdf sdfsdfsdfsdf sdfsdfsdf sdfsdfsdfds sdfsdfsdfsdf sdfsdfsdfsd </div>

</div>

</body>
</html>

New to CSS layouts. 100% height bugs

100% height bugs

cprescott1972

le_gber

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week