Jump to content

2 Columns same height


legacy800
 Share

Recommended Posts

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

Edited by legacy800
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...