CODEWITHSUNDEEP
css
Adam Robinson
Adam Robinson

Reputation: 185593

div shifts to the bottom of the page with any content

I am attempting to put together a web page that has four areas: a header, footer, content, and controls. The header and footer should be fixed at the top and bottom of the page (respectively) and automatically size to their content. The controls should go on the far right side of the page (vertically between the header and footer) and is fixed-width. The content area should fill the remainder of the page.

I had this working, but now whenever I add any kind of content (even just a single-word paragraph element), the controls area moves to almost the very bottom of the page. You can see what I'm referring to here: http://jsfiddle.net/ym8vY/1/

If I leave the controls div completely empty, it lays out exactly how I want it: http://jsfiddle.net/ym8vY/

My body currently looks like:

<header>
    <p>Header</p>
</header>
<div class="main">
    <div id="streamGraph" class="page">
        <div class="page-row">
            <div class="page-content-container-outer">
                <div class="page-content-container-inner">
                    <div id="graphContainer" class="page-content"></div>
                </div>
            </div>
            <div class="page-controls-container-outer">
                <div class="page-controls-container-inner">
                    <div class="page-controls"><!-- If anything goes inside here, it breaks -->
                        <div style="display: table; height: 100%;"> 
                            <div style="display: table-row; height: 0;">
                                <div>
                                    <label for="sampleCount"># Samples:</label>
                                    <input type="text" id="sampleCount" name="sampleCount" value="100" />
                                </div>
                                <div>
                                    <label for="tagCount"># Tags:</label>
                                    <input type="text" id="tagCount" name="tagCount" value="25" />
                                </div>
                                <div>
                                    <label for="fromDate">From:</label>
                                    <input type="date" id="fromDate" name="fromDate" />
                                </div>
                                <div>
                                    <label for="toDate">To:</label>
                                    <input type="date" id="toDate" name="toDate" />
                                </div>
                                <button id="tagsButton">Customize Tags</button>
                                <button id="refreshButton">Apply</button>
                            </div>
                            <div style="display: table-row;">
                                <div id="tagContainer" style="overflow: auto; height: 100%;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer>
    <p>Footer</p>
</footer>

And my CSS is:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
body {
    display: table;
}
header, .main, footer {
    display: table-row;
    width: 100%;
}
header, footer {
    background: lightgray;
}
.main {
    height: 100%;
}
.page {
    height: 100%;
    display: table;
}
.page-row {
    display: table-row;
    width: 100%;
}
.page-content-container-outer {
    display: table-cell;
    width: 100%;
    height: 100%;
    padding: 10px;
}
.page-controls-container-outer {
    display: table-cell;
    height: 100%;
    padding: 10px;
}
.page-content-container-inner {
    border: solid;
    border-color: gainsboro;
    border-width: 5px;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    padding: 5px;
}
.page-controls-container-inner {
    border: solid;
    border-color: gainsboro;
    border-width: 5px;
    border-radius: 10px;
    height: 100%;
    padding: 5px;
}
.page-controls {
    height: 100%;
    width: 300px;
}
.page-content {
    height: 100%;
}

Upvotes: 0

Views: 38

Answers (3)

gdpelican
gdpelican

Reputation: 568

Add vertical-align:top; to your .page-controls-container-outer class

Upvotes: 1

user3518892
user3518892

Reputation:

Change this 

<div style="display: table-row; height: 0;">

to this

 <div style="display: table-row; height: 0; float:left;">

Upvotes: 0

Liftoff
Liftoff

Reputation: 25372

Your right-side div is being pushed down to the baseline. Add vertical-align:top to fix it:

div
{
    vertical-align: top;
}

JSFiddle

Side note: The default value for vertical-align is baseline. Always keep this in mind when using cells and inline-blocks.

Upvotes: 2

Related Questions