Floating divs background color does not reach till page end

Question

I am having problems with displaying 2 floating divs with individual backround colors.

So the top element is my header. Beneath there should be a navigation and a main div.

Both of them have different background colors and the color should be displayed till the end of the page by default (even if the text length between the divs is different).

I made a jsfiddle demo for better explanation. You can click on the nav div and on the main div for displaying more text.

Demo: http://jsfiddle.net/AfRH2/22/

HTML:

<section id="admin_header">

</section>

<section id="admin_main">
    <!-- Navigation -->
    <nav id="nav">
       text
    </nav>

    <!-- Content -->
    <article id="main">
        text
    </article>

    <div style="clear: both"></div>
</section>

CSS:

body { 
    font-size: 12px;
    height: 100%;
}

#admin_header {
    position: relative;
    height: 100px;
    background-color: #000000;
}

#admin_main {
    position: relative;
    min-height: 100%;
}

#nav {
    position: absolute;
    width: 160px;
    float: left;
    top: 0;
    left: 0;
    margin: 5px 0 0 0;
    background-color: #f5f4f2;
}

#main {
    position: absolute;
    float: left;
    top: 0;
    right: 0;
    left: 160px;
    margin: 5px 0 0 0;
    padding: 20px;
    background-color: #f9f9f9;
}

p { display: none; }

Use a linear-gradient on the body: http://jsfiddle.net/GNLFh/ — nice ass, Mar 31 '14 at 19:59
See http://stackoverflow.com/questions/147528/how-do-i-force-a-div-block-to-extend-to-the-bottom-of-a-page-even-if-it-has-no-c — TylerH, Mar 31 '14 at 20:03

Xaxum · Answer 1 · 2014-03-31T20:53:04.763

0

Your containing section, admin_main, has no height so the nav only uses height required. Adding height to admin_main resolves.

html,body { 
    font-family: sans-serif;
    font-size: 12px;
    height: 100%;
}

#admin_main {
    position: relative;
    height: 100%
}

See here -- http://jsfiddle.net/7M4Ek/

edited Mar 31 '14 at 20:53

answered Mar 31 '14 at 20:38

Xaxum

3,545
9
46
66

Please explain downvotes. The solution works so what is the issue? – Xaxum Mar 31 '14 at 20:43
It doesn't really work. Try to expand the "text" content and you'll see that the side column is not extending all the way down. Also there's extra spacing on the bottom, that makes the scrollbar appear even when it shouldn't because there's not enough content – nice ass Mar 31 '14 at 23:04
@onetrickpony thanks for pointing those issues out. I can see yours works perfectly but I don't understand why? Can you explain at all? I have not seen it approached this way. – Xaxum Mar 31 '14 at 23:28
1

I'm not changing any heights. To draw the columns I'm just applying a gradient background on the body element, which by default extends all the way to the bottom. See the linked Q, it's called "faux columns" because they are not real columns. It's also possible to achieve this with flexboxes – nice ass Apr 01 '14 at 00:13
@onetrickpony Thanks I will look at those to further clarify. – Xaxum Apr 01 '14 at 00:44

Floating divs background color does not reach till page end

1 Answers1