Nested DIVs width % height

Question

I have the following code:

<!doctype html>
<html>
<head>
  <style type="text/css">
    #left {
      float: left;
    }

    #left_top, #left_bottom {
      height: 50%; /* Not working... */
    }

    #right {
      float: left;
    }
  </style>
</head>
<body>
<div id="wrapper">
  <div id="left">
    <div id="left_top">A</div>
    <div id="left_bottom">B</div>
  </div>
  <div id="right">
    Content
    <br />
    Content
    <br />
    Content
  </div>
</div>
</body>
</html>

The two DIVs with the IDs left_top and left_bottom should take up 50% of the height of the surrounding DIV (#left). How can I make that happen?

Thanks and regards!

@mohamedrias - only because you changed the CSS to provide a specific height for `#left` — SW4, May 22 '14 at 10:14
In deed it is - but since the height of the right div is flexible and the left div shoudl have the same height, I cannot provide a px-value here. And 100% does not work... — Daniel, May 22 '14 at 10:14
@SW4 i have removed all height & width. http://jsbin.com/xavog/1/edit i feel its occupying 50% height by default. — mohamedrias, May 22 '14 at 10:16
Check out this: [http://stackoverflow.com/questions/4804581/css-expand-child-div-height-to-parents-height](http://stackoverflow.com/questions/4804581/css-expand-child-div-height-to-parents-height) — RubberPoint, May 22 '14 at 10:34
You cannot set a percentage height unless it's parent has a specified height set — Pete, May 22 '14 at 10:55

score 0 · Accepted Answer · answered May 22 '14 at 10:12

You are assuming left is the same height as content, however this isnt how floated divs work.

You can see this in effect here.

One way would be to give both left and right the same specified height.

The alternative, for a more flexible layout would be to use CSS tables, and not floats:

Demo Fiddle

CSS

#wrapper {
    display:table;
    height:0%; /* to provide a base 'autofit' height */
}
#left, #right {
    display:table-cell;
}
#left_top, #left_bottom {
    height: 50%;
}

Nested DIVs width % height

1 Answers1

Demo Fiddle