CODEWITHSUNDEEP
htmlcss
achillesminor
achillesminor

Reputation: 181

Trouble with floated div not respecting height value

I have a page using various table display values in an attempt to have the body of my page automatically fill the space between the header and the footer.

I have two divs floated, left and right within the body; the right floated div is set to "height: 100%" as I want have an inset box shadow that I am using to visibly split the contents of both divs. All of this works fine as long as the content in the left div does not become long enough to cause the page to require a scroll bar, as soon as this happens, the right floated div does not seem to respect it's height value, and reverts to it's height being determined by it's contents.

jsFiddle where it works: http://jsfiddle.net/ec3upxk7/4/

And where it stops working: http://jsfiddle.net/yw3vLess/2/

Here is the code of the working one:

HTML:

<div class="container">
    <header class="header">
        <p>This is the header</p>
    </header>
    <section class="content">
        <div class="content-body">
            <div class="left-panel">
                <p>This is the content.</p>
            </div>
            <div class="right-panel">
                <p>This is not the content.</p>
            </div>
        </div>
    </section>
    <footer class="footer">
        <p>This is the footer.</p>
    </footer>
</div>

CSS:

/* Reset */
html, body { height: 100%; margin: 0; padding: 0; }

/* Essentials */
.container { display: table; }
.content { display: table-row; height: 100%; }
.content-body { display: table-cell; }

/* Aestetics */
.container { width: 100%; height: 100%; }
.header, .footer { padding: 10px 20px; background: #f7f7f7; }
.content-body { background: #e7e7e7; }

.left-panel {
    width: 50%;
    float: left;
}

.right-panel {
    width: 49.9%;
    height: 100%;
    float: right;
    box-shadow:
        inset 10px 0px 5px -7px rgba(0,0,0,0.5);
}

Upvotes: 3

Views: 716

Answers (2)

Stefan
Stefan

Reputation: 1895

Change

float: right;

in the right panel to

display: inline-block;

This gives the shadows the 100% height.

Like this fiddle: http://jsfiddle.net/yw3vLess/5/

Upvotes: 7

tallrye
tallrye

Reputation: 181

You can give this a try maybe;

http://jsfiddle.net/tallrye/yw3vLess/4

.container-height {
    display:table;
    padding-left:0px;
    padding-right:0px;
    width:100%;
}
.row-height {
    display:table-row;
}
.col-height {
     display:table-cell;
     float:none;
     width:49.9%;
 }

.col-top {
    vertical-align:top;
}

You can read more about this approach in this article:

http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

Hope this helps.

Upvotes: 1

Related Questions