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

Tue Oct 28 15:52:52 MST 2003

Hi Folks.

I've read in a few places that it should be (is) possible to use CSS and
the <div> tag to do nearly everything you can do with table tags. So, I'm
trying be all progressive, and and use CSS to create a 2-column html page,
where column 1 has a different background color from the body, and is the
full height (minus margins) of the page.

Trying various things, including sample code from the CSS2 specification.
Here's some  abbreviated code:

div.sidebar {
  background-color: #babfa0;
  width: 233;
  float: left;
}

<html>
<body>
<div class="sidebar">
little bit of content
</div>
Other content, which takes up much more space
vertically than the sidebar
</body>
</html>

Obviously, the float accomplishes only having the other content wrap
around the div block. The sidebar div has a height computed based on its
content. What I want is to have it's height equal to the height of the
page, which I had thought I could get with "height: inherit;" which
according to the docs causing inheritance from the enclosing block.
Apparently, the enclosing block is something other than the entire web
page here. "height: 100%;" doesn't work either.

The CSS example used 2 divs, each with a "position: fixed;", and a little
drawing showing page arrangement which looked just like what I wanted
(except for the background color thing). Well, using their code, the
background color of the left div still fills only to the height of the
content.

Suggestions appreciated.
jed
-- 
... it is poor civic hygiene to install technologies that could someday
facilitate a police state. -- Bruce Schneier