Hi all, have a small query about divs.

I'm building a site and the main layout consists of a banner at the top (containing logo), beneath that is a vertical navigation bar down the left side of the page, with the remaining space on the right taken up by the content box. Another thinner banner runs across the bottom of the site containing a copyright message and contact email etc.

My problem lies with the navigation bar. I have not specified a height attribute for the content box, so it grows dynamically with the contents (expected behaviour) and connects nicely to the bottom banner (expected behaviour).

However, the navigation bar does not grow, so I am left with a gap between the bottom of the nav bar and the bottom banner.

I have attempted setting the height attribute of the navigation bar so that it is always connected to the bottom banner, but when displaying the site in 4:3 AR (I use 16:10 widescreen AR), the bottom banner is pushed further down due to text wrapping in the content box, again leaving a gap between the navigation bar and the bottom banner. Here is a screenshot to show what I mean:

This is how it looks with no height specified, viewed in widescreen. Note: the white area is the content box, the two vertical lines on the left are the bottom of the navigation bar (the lines are left and right borders, I have omitted the bottom border since the top border on the bottom banner completes the box when they meet).



Here it is when viewed in non-widescreen with no height attribute specified (note the gap is bigger, since more text wrapping has occurred in the content box):



Now lets try setting a fixed height for the nav bar. In this case, 576px did the job perfectly. This is now how it looks in widescreen:



But oh no, since text is wrapped more in fullscreen, the content box pushes the bottom banner down more.



Actually come to think of it now, this is going to happen not only when viewing in different aspect ratios, but also in different resolutions.

So what I'm trying to find out is if there is a way to get the nav bar to vertically resize with the content box. I'm not sure how you would go about doing it, possibly with min-height?

Any help would be greatly appreciated.