m03geek m03geek - 9 months ago 55
CSS Question

CSS: 3 column height 100%

Here is an example page:


I want to set 100% height for the

class (see the "Problem here" comment in the CSS source), but when I do this left and right columns (nested in the
div) become
height. But when
has height set in pixels it works fine.

Are there any solutions without JavaScript?

Answer Source

Use display: inline-block for the columns and height:100% for the html and body tags:

    <!doctype html>
      html, body, #content, #left, #right, #center { height: 100%; }
      #content { width: 100%; }
      #left, #center, #right { display:inline-block; }
      #left, #center, #right { width: 32%; border: 1px solid red; }
      /* media query for IE 6-7 */
        #left, #center, #right { display:inline; }
        <div id="content">
            <div id="left">foo</div>
            <div id="center">bar</div>
            <div id="right">baz</div>