tags:

views:

219

answers:

3

Does anyone know what CSS can be applied to these elements to make the side bars expand to the height of the middle div?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
<head>

<title>This is my page</title>
<style type="text/css">

body
{
    background-color:#aaaaaa;
}

#container
{
    width:900px;
    margin-left:auto;
    margin-right:auto;
}

#leftborder
{
    float:left;
    width:10px;
    background-color:#ff0000;
}

#rightborder
{
    margin:0; padding:0;

    float:right;
    width:10px;
    background-color:#ff0000;
}

#middlecontainer{
    margin:0 10px;
}
</style>

</head>
<body>

<div id="container">
<div id="leftborder">
a
</div>
<div id="rightborder">
a
</div>

<div id="middlecontainer">
This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content 
</div>

</div>


</body>
</html>
+1  A: 

Take a look at examples at A list apart to see how this can be achieved visually. The other option is to use tables.

Goran
I wish people would provide comments when they downvote for no reason - or is that the other way around...
Goran
Unrelated: Tables are what im trying to get rid of. They aren't an option.
Sam152
I have experienced that in a css topic, the word tables always leads to downvotes. Relevant or not.
borisCallens
I've seen too many developers not using tables even when it made more sense - so I never disregard them completely. Btw. http://www.alistapart.com/articles/multicolumnlayouts/ might be more what you looking for then faux columns technique.
Goran
+1 - tables would be OK in my book except Sam152 does not want them (which should have been written in the question...)
Dror
I have a history of writing horrendously disgusting HTML table layouts. They are virtually a taboo to me now.
Sam152
+3  A: 

As long as your page has a fixed width, you can apply the Faux Columns-technique.

Short version: Repeat an image as a background image in a "wrapper-div" to make it look like the entire page is stretching, even though the content-divs inside only are a few lines long.

Arve Systad
Still not very neat, especially with sites with a large width.
Sam152
It is at least a *far* better way of doing it than using divs as borders. Can't see the problem though; its a commonly deployed technique, it works like a charm and allows smooth graphic-based layouts when you learn to use it properly.
Arve Systad
A: 

Background images or a simple border to the centre div (use a wide border and display your floats on top of that) seem the easiest solution.

You can also position your sidebars absolute inside your centre div, make them really long and apply an overflow: hidden to the centre div. I haven´t tried it, but that should work as well.

jeroen