I have a layout where Ive got two side by side divs both with borders and variable content. At times they might be the same height, but most of the time they will be different heights. However I need both divs to grow together and have the same minimum height. Below is the general code that I have running these divs. Right now they grow independently - opposite of what I need. If anyone has suggestions or pointers, great!
#generalContainer{height:100%;}
#generalContainer #gb_music{float:left;position:relative;border:1px solid #ccc;width:363px;margin-right:10px;margin-top:5px;height:100%;}
#generalContainer #gb_music .header {background:#ccc;padding:2px;color:#000;border-bottom:1px solid #ccc;font-weight:bold;}
#generalContainer #gb_music .content {background:#fff;margin:0;padding:5px;}
#generalContainer #gb_music .content h1 {font-size:14px;margin:0;padding:0;}
#generalContainer #gb_music .gb_photo {float:left;position:relative;margin:5px 10px 0 0;}
#gb_web{float:left;position:relative;border:1px solid #ccc;width:363px;margin-top:5px;height:100%;}
#generalContainer #gb_web .header {background:#ccc;padding:2px;color:#000;border-bottom:1px solid #ccc;font-weight:bold;}
#generalContainer #gb_web .content {background:#fff;margin:0;padding:5px;}A variation of Faux Columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->) may work for you...
#generalContainer{height:100%;}
#generalContainer #gb_music{float:left;position:relative;border:1px solid #ccc;width:363px;margin-right:10px;margin-top:5px;height:100%;}
#generalContainer #gb_music .header {background:#ccc;padding:2px;color:#000;border-bottom:1px solid #ccc;font-weight:bold;}
#generalContainer #gb_music .content {background:#fff;margin:0;padding:5px;}
#generalContainer #gb_music .content h1 {font-size:14px;margin:0;padding:0;}
#generalContainer #gb_music .gb_photo {float:left;position:relative;margin:5px 10px 0 0;}
#gb_web{float:left;position:relative;border:1px solid #ccc;width:363px;margin-top:5px;height:100%;}
#generalContainer #gb_web .header {background:#ccc;padding:2px;color:#000;border-bottom:1px solid #ccc;font-weight:bold;}
#generalContainer #gb_web .content {background:#fff;margin:0;padding:5px;}A variation of Faux Columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->) may work for you...