Click to See Complete Forum and Search --> : [RESOLVED] Make side column fill up main body


novemberGrey
02-24-2008, 09:35 PM
Hey I'm trying to make this website (http://spencer-designs.com/Stor-it/) I'm working on be vertically fluid, and I can't figure out how to get the side column on the right to vertically extend depending on how much content there is in the main <DIV>. Here is my CSS...

/* Main */
#main {width: 745px; height: auto; border-bottom: 1px solid #b5d1ee; background: #eff7fa url('http://www.spencer-designs.com/Stor-it/global/images/main.gif') repeat-x; overflow: hidden;}

/* Content */
#content {width: 475px; height: auto; float: left; background: transparent url('http://www.spencer-designs.com/Stor-it/global/images/contentShadow.jpg') no-repeat top right;}

/* Column */
#column {width: 269px; height: auto; float: right; border-left: 1px solid #b5d1ee; background-color: white;}

Centauri
02-24-2008, 09:53 PM
You cannot force the height of an element to take up remaining height, or to match the height of an unrelated element. But you can make it look that way. If the #main div has a white background, whilst the #content div gets the blue, you are part way there :/* Main */
#main {width: 745px; height: auto; border-bottom: 1px solid #b5d1ee; background: #fff url('http://www.spencer-designs.com/Stor-it/global/images/main.gif') repeat-x; overflow: hidden;}

/* Content */
#content {width: 475px; height: auto; float: left; background: #EFF7FA url('http://www.spencer-designs.com/Stor-it/global/images/contentShadow.jpg') no-repeat top right;}
If the #content div then had a right border the darker blue, and that border is trimmed from the shadow graphic, the illusion is complete.

novemberGrey
02-24-2008, 10:13 PM
Woohoo, it works! Thankyou!