DIV Ignoring Height Variable

**F12 Media** · 04-06-2007, 07:08 PM

I'm continuing work on this client trying out CSS divs instead of tables and I've run into another problem.

First the code,

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Anime Influenced</title>
<style type="text/css" media="screen">
/**
 * 100% height layout with header and footer
 * ----------------------------------------------
 * Feel free to copy/use/change/improve
 */
html,body {
 margin:0;
 padding:0;
 height:100%; /* needed for container min-height */
 background:#ffffff;
 background-image: url(image_04.gif);
 background-repeat: repeat-x;
 
 font-family:arial,sans-serif;
 font-size:small;
 color:#eeeeee;
}
h1 { 
 font:1.5em georgia,serif; 
 margin:0.5em 0;
}
h2 {
 font:1.25em georgia,serif; 
 margin:0 0 0.5em;
}
 h1, h2, a {
  color:#eeeeee;
 }
p { 
 line-height:1.5; 
 margin:0 0 1em;
}
div#container {
 position:relative; /* needed for footer positioning*/
 margin:0 auto; /* center, not in IE5 */
 width:690px;
 background:#2d2d2d;
 
 height:auto !important; /* real browsers */
 height:100%; /* IE6: treaded as min-height*/
 min-height:100%; /* real browsers */
}
div#header {
 padding:0em;
 background:#2d2d2d url("../csslayout.gif") 98% 10px no-repeat;
 height:50px;
}
 div#header p {
  font-style:italic;
  font-size:1.1em;
  margin:0;
 }
div#side {
 width:228px;
 height:100%;
 padding:1em;
 background:#0c0c0c;
}
div#affil {
width:420px;
height:107px;
right-padding:2cm;
 background-image: url(image_30.gif);
 background-repeat: no-repeat;
}
div#content {
 padding:0em 0em 0em; /* bottom padding for footer */
}
 div#content p {
  text-align:justify;
  padding:0 1em;
 }
div#contentsub {
 padding:0em;
 background:#2c2c2c;
 width:435px;
 float:right;
}
div#footer {
 position:absolute;
border-top: medium solid #ffffff;
 width:100%;
 bottom:0; /* stick to bottom */
 background:#232323;
height:50px;
}
 div#footer p {
  padding:1em;
  margin:0;
 }
a.info{
    position:relative; /*this is the key*/
    z-index:24;
    text-decoration:none}
a.info:hover{z-index:25;}
a.info span{display: none}
a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #000000;
    background-color:#ffffff; color:#534834;
    text-align: center}
</style>
</head>
<body> 
<div id="container">
<div id="header">
<img src="http://www.webmaster-talk.com/images/image_20.gif" align="left"><a href="index.php"><img src="http://www.webmaster-talk.com/images/nav_02.gif" align="left" border="0"></a><a href="/forums"><img src="http://www.webmaster-talk.com/images/nav_04.gif" align="left" border="0"></a><a href="<A href="http://www.anime-influenced.net/forums/forumdisplay.php?fid=6"><img">http://www.anime-influenced.net/forums/forumdisplay.php?fid=6"><img src="http://www.webmaster-talk.com/images/nav_06.gif" align="left" border="0"></a><a href="pindex.php"><img src="http://www.webmaster-talk.com/images/nav_08.gif" align="left" border="0"></a>
<img src="http://www.webmaster-talk.com/images/image_02.gif" align="right">
</div>
<div id="content">
<img src="http://www.webmaster-talk.com/images/image_15.gif"><img src="http://www.webmaster-talk.com/images/image_19.gif">
</div>
<div id="contentsub">
<? 
include 'database.php';
include 'content.php';
?>
<Br><br><br>
</div>
<div id="side" align="center">
<img src="http://www.webmaster-talk.com/images/image_23.gif">
<b>Anime and Manga posted and updated daily.</b>
<br />
<br />
<br />
<img src="http://www.webmaster-talk.com/images/image_27.gif">
<b>Active Members and Discussions.</b><br><br><br>
</div>
<div id="footer">
<p><?
include 'affiliates.html';
?></p>
</div>
</div>
 
</body>
</html>

(I am aware that the way I have this coded as of now would not pass as xhtml and validation would fail)

The problem is that the side div is ignoring any attempt at me giving it a height variable, I have replaced it with a pizel variable and it still only conforms to the content. From what I know the 100% div height should work as I have the container defined including the body too. Whats going on?

**vangogh** · 04-07-2007, 01:19 AM

I think you already now you should clean up the code so I won't remind you.

The problem is:

height: auto !important;

on the container div. By setting it to important it's what's controlling the height and not the 100%.

**ADAM Web Design** · 04-07-2007, 02:49 AM

Your client is paying you to do an anime site? Dude, you're either just starting or this is your own site. There's no way that site is paying you what a regular commercial site would.

Not only that, why are you leeching WMT images in your code sample?

Code:

<div id="side" align="center">
<img src="http://www.webmaster-talk.com/images/image_23.gif">
<b>Anime and Manga posted and updated daily.</b>
<br />
<br />
<br />
<img src="http://www.webmaster-talk.com/images/image_27.gif">
<b>Active Members and Discussions.</b><br><br><br>
</div>

As far as 100% height goes, it really doesn't work that well. If what you want is a column going down the right side, then create a faux column background in Photoshop and set it as your body background (use repeat-y instead of repeat-x). If you want to use that top background, create header div with that as the background. That will go down to 100% height regardless of how tiny your content is, since it's a body background.

By the way, where did you get that code? It looks like someone's got some IE angst issues and probably should switch to decaf.

**F12 Media** · 04-07-2007, 07:50 AM

1. Yes they are paying to make them a small website off of the page they had, thus the fualty code. (I think it's some 12 year old

)

2. I don't know why the forum filled in webmaster-talk.com the orignal links were just images/image_##.gif

3. I got most of the CSS from what they had, they wanted additions not fixes.

4. Thanks for the help I'll try some of these suggestions.