Search code examples
csshtmlheightfill

CSS: div height not filling vertically

I have a div (in the attached example, .report) which I would like divided into two divs (.report-title and .sections). Both divs should fill the container div vertically, and I'm struggling to make this happen consistently. I don't want to stretch the container vertically; I want .report to only be tall enough to contain the content, and for both of the contained divs to have an equal height. Neither div should have a set height or function as a table. The goal is to have the divs be responsively sized, except with .report, .report-title, and .sections equally tall; they should all have the same height as whichever is taller at the moment.

What is currently happening looks something like this:

enter image description here

or this:

enter image description here

What I'd like to happen would look something like this:

enter image description here

or this:

enter image description here

I've tried setting heights to 100% and attempting some jQuery tricks, so far with no luck. What is the simplest solution here?

HTML:

<div class='report'>
    <span class='report-title'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis elit non dui convallis, ut ornare est semper. Mauris eget libero vitae mi varius lobortis.
    </span>
    <span class='sections'>
        <span class='report-section'>Date: 2013-05-07</span>
        <span class='report-section'>Number: ABC123</span>
        <span class='report-section'>Themes:
            Chrome, Web Design, jQuery
        </span>
        <span class='report-section'>Sentiment: Positive</span>
        <span class='report-section'>
            URL: 
            <a href='http://api.jquery.com/Types/#Selector'>
                http://api.jquery.com/Types/#Selector
            </a>
        </span> <!-- report-section -->
    </span> <!-- sections -->
</div> <!-- report -->

CSS:

body {
    height: 100%;
    width: 100%;
}

.report {
    border: 1px solid black;
    text-align: left;
    vertical-align: top;
    display: inline-block;
    height: 100%;
    width: 90%;
}

.report-section {
    background-color: lightgrey;
    border-radius: 3px;
    box-shadow: 0 0 5px black;
    -moz-box-shadow: 0 0 5px black;
    -webkit-box-shadow: 0 0 5px black;
    display: inline-block;
    margin-bottom: 10px;
    margin-left: 10px;
    padding: 5px;
    text-align: left;
}

.report-title {
    background-color: whitesmoke;
    border-right: 1px solid black;
    display: inline-block;
    height: 100%;
    padding: 5px;
    font-size: 125%;
    text-align: left;
    text-decoration: bold;
    width: 38%;
}

.sections {
    background-color: blue;
    display: inline-block;
    float: right;
    height: 100%;
    padding-top: 5px;
    padding-right: 10px;
    width: 59%;
}

http://jsfiddle.net/dkeWs/

Solution

  • Demo Fiddle

    html , body {
    height: 100%;
    width: 100%;
    margin:0px;
    padding:0px;
}

.report {
    border: 1px solid black;
    text-align: left;
    vertical-align: top;
    display: table;
    width: 100%;
}

.report-section {
    display:inline-block;
    background-color: lightgrey;
    border-radius: 3px;
    box-shadow: 0 0 5px black;
    -moz-box-shadow: 0 0 5px black;
    -webkit-box-shadow: 0 0 5px black;
    margin-bottom: 10px;
    margin-left: 10px;
    padding: 5px;
    text-align: left;
}

.report-title {
    background-color: whitesmoke;
    border-right: 1px solid black;
    display: table-cell;
    padding-top: 5px;
    padding-left:2px;
    font-size: 125%;
    text-decoration: bold;
    min-width: 50%
}

.sections {
    background-color: blue;
    display: table-cell;
    padding-top: 5px;
    width: 50%;
}

    You set padding-right:10px to the right div which pushed it down even if it was floated because the total width exeeded the space.

    Without using display:table; and display:table-cell :

    Updated: Click to see this fiddle