two columns equal height (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

robersot -> two columns equal height (12/1/2004 13:50:37)

Hi,

I have been struggling to make two columns in my layout have equal height regardless of which one has more content. I haven't been able to figure out a way to make it work using background images like I usually would. I can make it work using "display: table" but of course that doesn't work in IE. I am running out of things to try and would be more than grateful for any suggestions. My goal is to have the bottoms of the content and menu divs line up at all times. Thanks for your help.

http://test.newpaltz.edu/tim/newsite_barebones/

The css is included in the source.



d a v e -> RE: two columns equal height (12/1/2004 15:10:38)

not sure whether it works in IE but how about min-height? (on each column)

e.g. 

min-height: 220px;



robersot -> RE: two columns equal height (12/1/2004 15:38:22)

Thanks for the suggestion. I've played around with heights and min-heights. I've found that without any content I can make it work by specifying min-heights for mozilla and then using the star hack to specify heights for IE that only IE will recognize. But as soon as I add content, if the content extends beyond the min-height the other div doesn't stretch with it.



bobby -> RE: two columns equal height (12/1/2004 15:39:38)

I'm always running into this problem with IE...

I'm curious to see a good fix... [:D]



Giomanach -> RE: two columns equal height (12/1/2004 15:55:13)

http://www.positioniseverything.net/threecolbglong.html

yeah it's for three columns., but theory should be the same.

Go John & Holly!!![:D]



c1sissy -> RE: two columns equal height (12/1/2004 16:00:07)

Dan has the correct answer, go to PIE and the site that Dan is recomending and you will be able to use this for a muliti column layout. PIE is one of the best IMO for anything related to positioning and any kind of bug for IE.



robersot -> RE: two columns equal height (12/1/2004 16:15:31)

Thank you for your help. I agree that poisitioniseverything is a great site. I actually read this page when I was searching for solutions. I frequently use the background image technique to solve these types of problems. However in this case I haven't been successful. The problem is the horizontal space between the main image and the content div. I don't know how to include a background image and keep that space there.



bobby -> RE: two columns equal height (12/1/2004 16:27:04)

more playtime fun!

[:D]

Thanks for the link Dan...



c1sissy -> RE: two columns equal height (12/2/2004 0:20:08)

I'm not sure if I am right on this, but doesn't IE not recognize the min/max height?

If you creat a small gif, and give it the proper repeate in your styles, this should work?



d a v e -> RE: two columns equal height (12/2/2004 3:05:43)

sissy you're probably right - i think it tried it once and it might have been for this reason.

how about a container div with the 2 columns in it, make the columns 100% in height? (so they fill their parent container) sorry just guessing now...



Giomanach -> RE: two columns equal height (12/2/2004 3:37:22)

IE won't parse the 100% height....



d a v e -> RE: two columns equal height (12/2/2004 3:39:46)

table for two? [:D]



c1sissy -> RE: two columns equal height (12/2/2004 9:52:08)

Unfortunatlly IE is a spoiled little creature who doesn't like to play nicely with your code. This is why you should always view in other browsers first, then try to find a bug that it might be and see if there is any resolution to that bug.

go through the PIE site, I'm sure that somehwere there is an answer to this, I know I just read this today through the CSS-D list. If you search their archives if you are not on their mailing list (and if you do sign up, there is an extensive amount of emails that come in through this so be prepared.[;)]

I know that there is a way to resovle it, Search their archives for 2 columns equal height and it should bring up all the discussions that revolve around this problem.
Hope that this helps you out a bit.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625