CSS to control left and right column div heights

I've used the code at Max Height Div CSS to make the base of the columns align. This works when there's more content in the left compared with the right, but what if sometimes there's more content in the right than the left, it seems that the content in the right is truncated. Is there a solution to this issue please, without using fixed heights or tables?
LVL 1
ncwAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

shishir_sriCommented:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  .floatLeft {float:left;}
  .child-left, .child-right {width:50%; height: 100%;}
  .child-left {background:yellow;}
  .parent {
    position: relative;
    width: 100%;
    background: none repeat scroll 0 0 green;
  }
  .clearFloat {
    clear: both;
  }
  
</style>
</head>
<body>
 <div class="parent">
    <div class="child-left floatLeft">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
    </div>

    <div class="child-right floatLeft">content content content content content content content content content content content content content content content content 
    </div>
   <div class="clearFloat"></div>
</div>
</body>
</html>

Open in new window

0
shishir_sriCommented:
Sorry. That won't work if the left side-bar has less content than the right side-bar.
0
skullnobrainsCommented:
hmmm... if the point is just to end up with 2 columns this looks awfully complicated

just use width:50%; AND ( float:left OR display:inline-block ) for BOTH divs and foget about absolute positionning and the likes

if your divs have margins, you'll have to change the width accordingly.
if they use paddings or borders, you can either do the same or use box-sizing:border-box;
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

shishir_sriCommented:
@skullnobrains: but that doesn't ensure that both columns are always of the same height, right?

@ncw: If your objective is to just show different background colors or images in the 2 columns, then instead of trying to make sure that both columns are of the same height, why not just add the backgrounds to the parent element?
0
skullnobrainsCommented:
if you need columns the same height (in simili-code and using a single div)

div
position absolute
width 50%

body
margin-left 50%

if you set backgrounds for the body, you should not really care about the size of the divs

not knowing the goal, it is difficult to determine which is best. a table layout can also be a solution (which can be done in css using display:table-cell and table-row)
0
ncwAuthor Commented:
@skullnobrains: The requirement is very clearly defined in my question, please take the time to read before posting. Maybe if I say it again in different words it might help, who knows. Two coulumns, variable lengths of content in each column (it an ecommerce catalogue page, menu and product listing), sometimes more content in left than right, sometimes more in right than left, base of both div columns must always align. So if the 2 columns are contained within a wrapper div then one might hope that height:100% might achive this, but it doesn't.

display:table-cell and table-row sounds hopeful, but I've never manage to achieve it.
0
skullnobrainsCommented:
sorry my previous comment was a little light-headed

this is not feasible in pure css as far as i know unless at least one column has a fixed height. it is actually one of those few well-known problems in CSS. you face 2 problems here : once you use a float or absolute or relative positioning, the corresponding element's height will not be transferred to the parent element. additionally, the way browsers handle the body's height varies quite a lot.

would you consider using a js trick ? (not as easy as it seems if you need to handle resize properly)

if you describe the requirements more feature-wise, there may also be a way to achieve the same goal without requiring those divs to have exactly the same height
0
ncwAuthor Commented:
My conclusion was that only a trusty old table would solve the issue and that's what I've used. The left column has a background colour and it is required that it's base aligns with the base of the content in the right column for aesthetic reasons, but also it needs to be allowed to extend lower beyond the line of the right column when the menu is longer; and it seems divs can't do this where there's variable content.
0
ncwAuthor Commented:
No I think a js trick is not worth while, thanks.
0
skullnobrainsCommented:
glad to see you got it working. table is definitely simpler. beware that it will be difficult to force the table to reach 100% of the width of the page if it is not fixed and if the cells don't hold enough content to act as a placeholder.

alternatively, if you  only need bg colors, you can add a single bg image with both colors to the body (1px height, and 2px wide, one for each color should do once stretched)

i forgot to mention, this is easy to do if you can have separate scrollbars for the menu and the rest of the page, but i assume this is not what you need
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ncwAuthor Commented:
Ah yes using a background image in the wrapper div is the other solution, a Faux Column
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.