Home/ Questions/Q 8992951
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T23:04:57+00:00

I am trying to make a fluid layout that has no fixed height or

  • 0

I am trying to make a fluid layout that has no fixed height or width elements. The body of my page is divided into three columns (and since I want them all to be equal heights, I’ve decided to use css tables). However, when I try and add a 100% height property to the table div (or the table-cell divs) they don’t expand to the full size of div.middle. I have made a JS fiddle for this question with the full code http://jsfiddle.net/3NMw5/, but here is a snippet:

<body>
    <div class='titleBar'>
        <div class='wrap'>
            <img src='../images/logo.png' />
        </div>
    </div>
    <div class='middle'>
        <div class='wrap mainContent'>
                <div class='leftColumn'>left here</div>
                <div class='center'>center</div>
                <div class='rightColumn'>right</div>
        </div>
    </div>
    <div class='footerBar'><div class='wrap'>footer</div></div>
</body>

and the css: 

div.mainContent { display: table; height: 100%;}
div.leftColumn { width: 20%; display: table-cell; background-color: #D2B48C; margin: 0; padding: 0;}
div.rightColumn {width: 20%; display: table-cell;}
div.center {width: 60%; display: table-cell;}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try adding height: 200px; to mainContent.

    div.mainContent {
display: table;
height: 200px;
}

    Here is the jsFiddle for the code.

    Adding height: 100%; should also work.

    Your problem was not that the columns were not stretching to full height, but rather that mainContent was not fully stretching.

    —

    EDIT: Okay, so the real problem comes when you try and make your container that fluid, because height is harder for a browser to calculate than width.

    The problem occurs when you set a percentage height on an element who’s parent elements don’t have heights set. In other words, the parent elements have a default height: auto;. You are, in effect, asking the browser to calculate a height from an undefined value. Since that would equal a null-value, the result is that the browser does nothing.

    In order to define the height of the div to a relative height, you must set the height of the parent elements as well.

    By adding height: 100% to .middle, you get something close to what you are after. See the jsFiddle here.

    Read more about the height issue here.

    • 0