100% Height of Div Side Bar

[coolimage]

Hi.

I have been building website for the last 10 years but only recently started to make the conversion from table based designs to CSS based designs. So far I haven't really had any problems until now...

It is hard to explain what I am trying to do, so better to show you.

I want my CSS design to mirror the design that I did with tables. I am having problems when the background image of the side nav bar does not scale to fill the div when the content is longer.

<snip> - Table based
<snip> - CSS based

Any ideas on how to over come this?

[edited by: limbo at 10:50 am (utc) on Feb 5, 2010]
[edit reason] No URL's - please see TOS. [/edit]

[limbo]

Hi coolimage

Welcome to WebmasterWorld [webmasterworld.com] :)

Could you post a little HTML and CSS (examplified) so we can take a look. Containers in CSS behave very differently to Table based layouts, especially when you are hoping to achieve the equivalent of 100% height...

[CSS_Kidd]

Hey coolimage,

What helped me in my early stages of converting html table designs to divs with css was to continue thinking of them as tables. I mean in the layout sense of it.

Where this:

<table>
<tr>
<td>cell 1</td>
<td>cell 1</td>
<td>cell 1</td>
</tr>
</table>

Layout wise, becomes this:

<div id="main-container">
<div id="inner-container">
<div class="cell">cell 1</div>
<div class="cell">cell 1</div>
<div class="cell">cell 1</div>
</div>
</div>

Now of course the above would require css styling that resemble the table version. And a lot of that would be trial and error at first. But because I am not aware of what your knowledge base of CSS is I will just suggest the following for now. A good idea is to brush up on your CSS skills and try some tutorials here: w3schools [w3schools.com] and other resources around the interslice. And always keep w3.org / learning css [w3.org] close at hand as well.

Just keep in mind that the above are just simple guidelines for what you may need to do.

It would be nice to see you post your code for both versions so we can get a better grasp on how much you are already familiar with.