View Full Version : Fluid DIV height: Left Menu column not matching up with Right Content

Nov 10th, 2009, 11:44 PM
Please HELP!

I have a vertical menu bar on the left, and the main content of the site on the right. The content height will vary from time to time, depending on what's placed there. I need the left menu DIV to be fluid in height, so that it extends down to match the height of the content, and fills with the background.

Here's my site:


As you can see, the left menu section is either too long (in IE), or too short in other browsers such as FF, Safari, Netscape.

What am I doing wrong?

Any help to solve this mystery is greatly appreciated!

Nov 11th, 2009, 01:02 AM
Hello puffnstuff,
Try putting that background image somewhere else.
Like this -

/* Use the below for paragraphs that need to be left and right justified */
{text-align: justify;
padding-left: 5px;
line-height: 100%;

float: left;
width: 100%;
background: url(images/gradient151.jpg) repeat-y left;

margin-left: 145px; /*Set left margin to LeftColumnWidth*/
background-image: url(images/gradient695.gif);
height: 100%;

float: left;
height: 100%; /* supposed to make it fluid height to match bottom of container */
width: 145px; /*Width of left menu bar*/
margin-left: -840px; /*Set left margin to -(MainContainerWidth)*/

margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;

Nov 11th, 2009, 01:18 AM
Thank you so much, Excavator! I never would have thought to put the nav background THERE.

Actually, when I tried what you suggested, it made things worse. So then I removed the repeat-y command, and now it works!

Thanks again.