2 Columns same height

[legacy800]

Hello,I was wondering what would be the best way to have 2 columns with the same height, if one stretches the other one needs to stretch along with it(in height).Let's just say for the sake of the example I split my page into 2 columns and the right column has content and the left one doesn't how do I get the left one to match up with the right columns height?I.E.<div id="container"> <div id="leftcolumn" </div> <div id="leftcolumn" <p>Content</p> </div</div>So Far I have used min-height in css, but the problem is that my content starts going beyond the set min-height and I don't want to increase it because it will become a mess on my indexpage.Hope that somebody can help.Greetings,Legacy

[ShadowMage]

First off, you have to have unique id's. You have two leftcolumn id's. I think it's a typo but I thought I'd point it out.Anyway try setting the height of your two columns to 100%. Since they're in a container they'll take up 100% of the container but not go beyond that. And I think they will still shrink and stretch depending on the amount of content in them, but I haven't tested that. You may also want to set a min height on the container.

[Ingolme]

First off, you have to have unique id's. You have two leftcolumn id's. I think it's a typo but I thought I'd point it out.Anyway try setting the height of your two columns to 100%. Since they're in a container they'll take up 100% of the container but not go beyond that. And I think they will still shrink and stretch depending on the amount of content in them, but I haven't tested that. You may also want to set a min height on the container.

That would only work if the container already has a set height.There are several solutions. One would be to have a vertically repeating image of two columns as the background of the container.Another solution is to have the longer column as the child element of the shorter one.