It’s the Side Bar Div that floats left that I want to stretch to the same height as the Main Div which floats right and vice versa.
The Pink Footer should always line up with the Black Bottom of the Side Bar Background Image as it does for the Home Page at the moment.www.warwickshire-webdesign.co.uk/go2tanzania/new/
I’ve bodged that with a spacer image, but if you click National Parks for instance you will see my problem… The footer drops down to allow the extra content and the side bar also expands slightly to allow the extra menu options. However, it doesn’t expand enough, leaving a large amount of blank space, which makes the shadow look ridiculous for starters.
I hoped it would be as simple as setting the Height of the Side Bar Div to 100 %... That has no affect!
I already have a Background Image for the Side Bar Div, which is the one I mentioned above that I need to sit at the bottom, so I can’t see how I can use the Background Image trick. Also, the Side Bar column clearly isn’t stretching so even if I put a Vertically Tiled Background Image in… Surely it wouldn’t help? Unless however there’s another Div that sits behind it on a different Z index with perhaps a Black Background so that any space below the Side Bar Div is filled with Black, which will match the bottom of the Side Bar Div Background Image.
This still wouldn’t help for instances where the Side Bar Div is longer that the Main Content, because the Pink Footer would still be sitting higher up…
However, if the above is possible I may have thought of a work around, where the Footer stretches the whole Width of the Page, but is split so that the left side is Black, giving the impression that it’s still 2 columns. That way the bottom of the left column fills with black and the right with white.
I think I know what I’m doing to achieve what I’ve mentioned above, but if you can think of any obvious floors or better solutions, please let me know…
P.S. There were already issues before I added the containing table with the shadow… I hoped that might help!