CODEWITHSUNDEEP
htmlcss
bestprogrammerintheworld
bestprogrammerintheworld

Reputation: 5520

display-table no working as intended - left,right columns

I want the left and right column to be the same height with a min-height of whole browswer-height.

html:

<div id="outfit-wrapper" class="clearfix">

    <div id="header"></div> 

    <div id="outfit-body">  
        <div class="table-row">            

            <div id="outfit-area" class="table-cell">      
                whatever content
                <div class="footer">
                 content within #outfit-area (bottom of #outfit-area)
                    <div class="clearfix"></div>
                </div>                     
            </div>

            <!-- I WANT the green left column to be the same height as
            right blue column - how do I achieve this? -->

             <div id="products-area" class="table-cell">
                 here are some products. here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.
                 <div class="clearfix"></div>
             </div>        

        </div> <!--end table row -->
    </div> <!-- end outfit-body-->

</div> <!--end outfit-wrapper-->

css:

/* clearfix */
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.clearfix { display: inline-block; }
.clearfix { display: block; }

/* 100% height layout - header is 10% of this height, #outfit-area and #products-area 90% */
html,body {margin: 0;padding: 0;height:100%;}
body {background: #ffffff;font-family: 'Noto Sans', sans-serif; font-size:13px;}

#header {
    position:relative;
    margin:0;
    padding:0;
    height:10%;
    width:100%;
    min-height:45px; /* Min-height is used because loogotype must be visible to user */
    background:yellow;
}


#outfit-body {
    display:table;   
}

.table-row {
    display:table-row;
}

.table-cell {
    display:table-cell;
    vertical-align:top;
}

#outfit-wrapper {
    position:absolute;
    width:98%;
    margin-left:1%;
    margin-right:1%; 
    min-height: 100%;
    height: 100%;    
    padding:0;
}

/* left column */
#outfit-area {
    position:absolute; /* I must have this here so 100% height can be achieved (because I have percentage height in parent div #outfit-wrapper */
    min-height:90%; /* header is 10% of the total height */
    width:60%;
    overflow: hidden;
    border-top:1px solid #acacac;
    border-left:1px solid #dfdfdf;
    border-right:1px solid #dfdfdf;
    background:green;
}

#products-area {
    width:40%;
    height:90%; /* header is 10% of the total height */
    border-right:1px solid #dfdfdf;
    border-top:1px solid #acacac;
    background-color:blue;
}

#outfit-area .footer {
    display:table-cell;
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:40px;
    line-height:40px;
    border-top:1px solid #dfdfdf;
}

Take a look at the jsfiddle: http://jsfiddle.net/TgM7t/24/

I want the left (green) column to be same height as blue (even when right column gets higher, then the green should be same height) I tried with display:table, table-cell, table-row stuff which I thought should work, but it's obviously something I am missing.

I know there are a lot of questions and answers on this subject, but I really can't find what I'm looking for...

My question: What am I missing?

Upvotes: 0

Views: 132

Answers (1)

edsioufi
edsioufi

Reputation: 8335

Forcing the height in one of the table cells will cause the row height not to adjust accordingly. In your case, it is the position: absolute; and min-height:90%; lines in the css of#outfit-area that are causing the cell to expand beyond the row.

To achieve the design you are looking for (i.e. 10% header, 90% body), I would set the height on the container of the body to 90%. The table layout would guarantee that the children table-row and table-cell "divs" expand naturally and occupy all the space.

Here is a demo.

The corresponding modifications in the css are:

#outfit-body {
    display:table;   
    height: 90%;
}

This already fixes the problem but I would also get rid of unnecessary height lines in the children (commented out below with "removed" mention):

#products-area {
    width:40%;
    /*height:90%;*/ /* header is 10% of the total height */ /*removed*/
    border-right:1px solid #dfdfdf;
    border-top:1px solid #acacac;
    background-color:blue;
}

#outfit-area {
    /*position:absolute;*/ /*removed*/ /* I must have this here so 100% height can be achieved (because I have percentage height in parent div #outfit-wrapper */
    position: relative; /*added because outfit area contains children div*/
    /*min-height:90%;*/ /*removed*/ /* header is 10% of the total height */
    ......

Upvotes: 1

Related Questions