Make one "min-height" match another

Hello all, I need help with this page specifically: http://kinchdesigns.ca/portfolio.html

The menu and the content area are seperate <div> They have "Min-Height" properties, and what I want to do is make them match each other, so they line up. Here is my css code: http://www.kinchdesigns.ca/images/style.css

 

Hmm... There isnt an easy way to do that using CSS. Div's dont work like how tables do. Both div's are independant of each other. So there is no way the navigation area can know how long the content area is. To achieve what you are trying to do, you'll need to use what is known as a faux column. Search for faux column on google, yahoo or whichever search engine you would prefer to use. I'll tell you in brief how this is done.

I have read your HTML code though I havent read its CSS. What you have to do is, apply a background image to #content. Lets assume the width of #menu is 150 px and #contenttext is 600 px. So the width of #content would most propably be 750px. Lets say you want the menu to appear in blue and contenttext to appear in white. You'll need to create an image which will be 750px wide and its height should be 1px. The image from its left should be blue 150px and the rest 600px should be white. Save the image. Assuming you named it bckcontent.gif, add this code to #content

#content {
background: repeat-y url(images/bckcontent.gif);
}

Code (markup):

And you are done Make sure you add a

<div style="clear: both"></div>

Code (markup):

just after the closing </div> of #contenttext

Thanks,
-- Naif

EDIT: One more thing, the min-height property isnt well supported by all browsers. Even IE doesnt support it..

 

All modern browsers support the min | max - height | width properties. IE is not a modern browser.

cheers,

gary

 

Sadly, not even IE7 has changed the story.
min-height and min-width still unsupported here..

 

Seems to work in IE7 for me with Windows Vista... I think I may just go with fixed heights, probbably be the best.

 

I'm not on Vista yet,
On my XP Pro IE7 seems to be ignoring them..