Search code examples
htmlcssinternet-explorermicrosoft-edgefluid-layout

Divide div into rows by percent, in a way that works for IE/Edge?

I have a fluid-layout page with a center image and two sidebars. Each of the sidebars is divided into two rows. These rows have their height defined as a percentage of their containing column...

...except in Internet Explorer and Edge, where their height is defined by their content.

My current setup requires that the rows have a display type of inline-table, which I know has not historically been supported by IE. IE 11 and Edge are supposed to support inline-table, but they do not appear to interpret it the same as other browsers.

What approach can I use so that Microsoft's browsers will give me the results I am getting from everything else?

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        .wrapper {background-color:#eee;}

        .column {
            width:25%;
            height:100%;
            display:table-cell;
            vertical-align:top;
        }

        .block_1 {background-color:#aaf;}

        .block_2 {
            width:50%;
            background-color:#afa;              
        }

        img {width:100%;}

        .block_3 {background-color:#faa;}   

        .row {
            width:100%;
            height:50%;
            vertical-align:top;    
            display:inline-table;
        }
        .a {
            height:30%;
            background-color:#ccf;              
        }
        .b {
            height:70%;
            background-color:#aac;              
        }
        .c {background-color:#fcc;} 
        .d {background-color:#caa;}
    </style>
</head>

<body>
    <nav class="navbar navbar-main">(navbar goes here)</nav>
    <div class="wrapper">

        <div class="column block_1">
            <div class="row a">row a</div>
            <div class="row b">row b</div>          
        </div>

        <div class="column block_2">
            <img src="images/homepage.jpg" class="img-responsive" alt="Home page image">
        </div>

        <div class="column block_3">
            <div class="row c">row c</div>
            <div class="row d">row d</div>          
        </div>

    </div>
</body>

https://jsfiddle.net/fkvnpk0b/2/

Solution

  • Might I suggest using Viewport Units here?

    http://caniuse.com/#feat=viewport-units

    vh is well supported down to IE9; the partial support refers directly to vmin in particular.

    Anyway, you'd want to change the heights of .row and .a and .b to use vh units instead of %. This will fill the viewport height on page load.

    https://jsfiddle.net/m4tuna/z6co93wa/

    Of course this is slightly different than your current example in that you're just filling the parent height by percentage. If your looking for it to fill any outer container by percentage in particular, you'll need to assign a height or min-height to the container so that the rows know what to fill.