Hi Cat,
There is really only one way to achieve liquid height with CSS at present, and that technique involves specifying an absolute position and both the top and bottom offset properties, which when both are present and an element is absolutely positioned causes the element's height to be stretched. It's not exactly the most intuitive way to get it done, and here's the kicker, it doesn't work in IE. If you want to observe this technique there are two modifications to make to your style sheet. Code in red are styles that were added, code in blue are styles that were already there and I simplified into less declarations.
Code:
body{
/* The font-family property is inherited, you only need to specify it once */
font-family: Verdana, Arial, sans-serif;
color: #444444;
line-height: 1.166;
/* Zero measurements do not require a unit */
padding: 0;
margin: 0;
position: relative;
}
Code:
#ccolumn{
position: absolute;
top: 70px;
bottom: 51px;
left: 97px;
float: left;
width: 227px;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
padding: 30px 15px 0 15px;
margin-top: 0;
font-size: 70%;
}
You might be asking, what about percentage height? Percentage height is very tricky, because of three cornerstones of CSS, the box model, how height is calculated when no height is specified and what happens when a percentage height is specified.
1. Height = Top Margin + Top Border + Top Padding + Height + Bottom Padding + Bottom Border + Bottom Margin. (the box model)
2. When no height is specified an element expands only enough to accommodate its content (termed shrink-to-fit).
3. When a percentage height is specified, the percentage height is calculated based on the height of the containing block.
So given the known rules you can come up with a test case.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type='text/css'>
html, body {
height: 100%;
}
body {
border: 1px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<p>
Hello, world!
</p>
</body>
</html>
<html> and <body> are *both* given a 100% height, because of rules 2 and 3. The <body> won't fill up 100% of the <html> element because by default it only expands enough for the content inside of it, giving the <html> element a 100% height cures that. When you look at this in a browser you see a vertical scroll bar, and that happens as a result of rule 1, 100% of the height of the <html> element, which is itself 100% of the height of the browser window, plus margins, borders and padding takes up more room than is available causing scroll bars.
So the positioning solution doesn't work in IE, and percentage height isn't a very good solution given its idiosyncrasies. The positioning solution *is* what the standards say should happen, so IE is incorrect in its behavior. There are a few ways of making IE do what it's supposed to do, but all of them involve javascript
AFAIK. This problem is addressed in dean edward's IE7,
http://dean.edwards.name/ie7. Otherwise you might consider looking into the proprietary IE expression() feature.
/* For IE */
body {
height: expression(/*Javascript goes here*/);
}
I'd include that via an IE conditional comment though, so that only IE sees it. If you don't know what that is, here's an example:
Code:
<!--[if lt IE 7]>
<script src='/ie7/ie7-core.js' type='text/javascript'></script>
<script src='/ie7/ie7-css2.js' type='text/javascript'></script>
<script src='/ie7/ie7-png.js' type='text/javascript'></script>
<![endif]-->
The markup inside of the comments is only included if the browser is Windows IE and less than version 7, this can work for any markup, style sheets, content, whatever.
HTH!
Regards,
Rich
--
[
http://www.smilingsouls.net]
[
http://pear.php.net/Mail_IMAP] A PHP/C-Client/PEAR solution for webmail
how to get the line to go all the way down?
