Automatically expanding a sidebar (using css and div)

[adlittman]

I was wondering if there is a way to make a sidebar grow automatically (vertically of course) as the length of the page increases. I have tried putting in a bunch of empty <p> tags which works, but if I add or change text in another div tag I have to adjust the <p> tags adding ir subtracting when necessary. I am using a two column format if that helps any. The left column being used for navigation and the right for content. The left column has a different bg color than the right. As I'm sure you can tell, I'm still quite new to CSS. Any help would be appreciated. Thank you very much.

Ad

 

[cLFlaVA]

If you have your navigation pane (sidebar) in one column in the table, and your content is in the other column in the table, then as the content increases, so will the navigation bar.

I'm not sure I understand your question.

*cLFlaVA
----------------------------
A pirate walks into a bar with a huge ship's steering wheel down his pants.
The bartender asks, "Are you aware that you have a steering wheel down your pants?"
The pirate replies, "Arrrrr! It's driving me nuts!

 

[adlittman]

Let me see. I'm not using tables at all. Just two main areas using <div>. The navigation bar's content will never change. The only thing inside the tag are button images, but the don't fill the page vertically so that particular area is not expanding to fill the vertical area. There is just a white space. Does there need to be content in order to fill the area or can I set some CSS property to automatically fill tha space? Thanks again.

 

[cLFlaVA]

Well, using CSS will fill the <div> tags, but still only up until the point that it ends, which would still be the end of the content on the left side.

Consider using tables, here is a VERY basic example:

<table border="0" width="100%">
<tr valign="top">
    <!-- Start Navigation Side -->
    <td bgcolor="gray">
        navigation1<br>
        navigation2<br>
        navigation3<br>
    </td>
    <!-- End Navigation Side -->

    <!-- Start Content Side -->
    <td bgcolor="yellow">
        Content content content content...
    </td>
    <!-- End Content Side -->
</tr>
</table>

*cLFlaVA
----------------------------
A pirate walks into a bar with a huge ship's steering wheel down his pants.
The bartender asks, "Are you aware that you have a steering wheel down your pants?"
The pirate replies, "Arrrrr! It's driving me nuts!

 

[Foamcow]

Depending on the exact nature of your background you might like to try using the faux columns method.
This is outlined on "A list Apart" and has been mentioned a number of times in this forum.

http://www.alistapart.com/articles/fauxcolumns/

Basically make a "container" div and put your 2 columns in there. Then create a background tile to go in the container div and repeat vertically.
So when your columns expand, the container div expands to hold them and the background repeats giving the impression that your columns have coloured backgrounds that extend to the full height of the page.n

http://www.foamcow.com