...

View Full Version : Floating Height Problem.



tosbourn
03-12-2009, 12:37 PM
Hey,

This will be hard to explain as the site isn't somewhere where I can just link you up. But here is my problem. I have two divs inside a container div (CSS below) I need the left hand div to fill all the available space vertically as the container div can offer. The right hand div will always be at least slightly longer than the left hand div, so pretty much always dictates the height of the container.

left hand div CSS


#MyPlace {
background-color: rgb(240,230,250);
padding:5px;
width:510px;
margin-left:10px;
height:100%;
float:left;
}

right hand div CSS


#RightColumn {
width:250px;
margin-left:10px;
margin-right:10px;
float:right;
}

container CSS


#Content {
padding: 5px 0;
margin-bottom:5px;
width:800px;
float:left;
border-bottom:2px dotted silver;
}

abduraooft
03-12-2009, 01:11 PM
You'd need to use faux-columns (http://www.alistapart.com/articles/fauxcolumns)

tosbourn
03-12-2009, 02:24 PM
I really hoped no one would say that! (or at least, that it wasn't the only option!) I don't really think this is a feasible option in this case (and sorry I should have stated this from the start) simply because the background will be changing based on user input, I really do need the entire div to be the same height as the longest div.

Just thinking aloud here, but what about some Javascript that grabs the height of both divs, compares them, then sets both divs to be the same height as the largest value? I know this isn't the most accessible way of doing things, but this is an internal site where we can set the rules! How practical would this be?

abduraooft
03-12-2009, 02:29 PM
I really hoped no one would say that! (or at least, that it wasn't the only option!) I don't really think this is a feasible option in this case (and sorry I should have stated this from the start) simply because the background will be changing based on user input, I really do need the entire div to be the same height as the longest div.
Why didn't you say that before? lol
See http://v3.thewatchmakerproject.com/journal/308/equal-height-boxes-with-javascript



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum