[CLUE-Tech] Using CSS to get an HTML table effect.

Paul Bille Paul at eBille.cudenver.edu
Tue Oct 28 17:21:54 MST 2003


Jed > "column 1 has a different background color from the body, and is the
full height . . ."

Jed,

If I understand your objective is to have the sidebar color run the full
length of the page on the left side, this code should work with Netscape
7.1.  I have a greenish bar running the full length of the page when I view
this HTML code snippet using Netscape 7.1.

The code DOES NOT WORK for IE 6.0.  IE shows the bar only extending the
range of the text in the block.  That's a pain. Let me know what it looks
like to you.

In any case, I think you're using the wrong tool here.  If you want a
sidebar, you should use frames.  Look at the CLUE Calendar for an example of
a sidebar with frames.
http://clue.denver.cu.us/calendar

Paul

<html>
<head>
<base href="http://bille.cudenver.edu/">
<link href="cor/main.css">
<style>
<!--
body	{
	width:850px;height:1100px;background-color:#808080;
	color:#ffffff;
	font:normal normal 10pt arial, helvetica;
	}
.sidebar{
	width:100px;
	background-color:#babfa0;
	color:#000000;
	height:inherit;
	float:left;
	margin-right:20px;
	}
-->
</style>
</head>
<body>
<div class="sidebar">
What I want is to have it's height equal to the height of the page
</div>
<div style="width:300px;
	margin-left:20px;
	text-align:justify;">
Jed,
<p>
If I understand your objective is to have the sidebar color run the full
length of the page on the left side, this code should work with Netscape
7.1.
I have a greenish bar running the full length of the page when I view this
HTML code snippet using Netscape 7.1.
<p>
The code DOES NOT WORK for IE 6.0.  IE shows the bar only extending the
range of the text in the block.  That's a pain.
Let me know what it looks like to you.
<p>
In any case, I think you're using the wrong tool here.  If you want a
sidebar, you should use frames.  Look at the <a
href="http://clue.denver.co.us/calendar">CLUE Calendar</a> for an example of
a sidebar with frames.<dir><a
href="http://clue.denver.co.us/calendar">http://clue.denver.cu.us/calendar</
a></dir>
<p>
<img src="cor/paulr.gif" class="signature">
</div>

</body>
</html>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://cluedenver.org/pipermail/clue-tech/attachments/20031028/7294c453/temp.html


More information about the clue-tech mailing list