Even-ing out two verticle columns. auto!important doesn't seem to work

[seattle_rockstar]

I've tried about everything to try and even out the two verticle columns in this site and am out of ideas. Someone suggested

margin-bottom:-2000px

padding-bottom:2000px

overflow:hidden

 

and this made the entire site black except for the UL.

 

Ideas anyone?

 

http://getbluefrog.com/pcs/main.html

Edited March 26, 2009 by seattle_rockstar

[Wickham]

In your case it's simple because #wrap, #col1 and #col2 all have the same background image back.jpg or white; just add a clearer div before the closing tag for #wrap:-

 

.........

 

 

 

Edit: I found that the above worked in Firefox but IE7 was affected by the height of the contact form so close to the bottom of #col2 so I added padding-bottom: 15px to the #col1:-

 

#col1 {

background:url(images/back.jpg) repeat-x top left

 

#fff; padding-bottom: 15px;

float:left;

width: 546px;

margin:0;

}

One of the solutions below would be better, but more complicated.

 

If the columns had different backgrounds which you wanted flexible in height, but equal, there are two main methods - putting position: absolute divs behind the col divs - or using a different order for the divs so that the one with the least content has the other nested inside and then its content following the nested div so that the column background is dragged down by the larger content of the nested div.

 

See items 16, 17 and 19 here http://www.wickham43.net/firefoxbackground.php item (item 18 has to have a fixed width for its image background which has fixed width column colors).

Edited March 26, 2009 by Wickham