Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Darren Buckley
Darren Buckley
9,151 Points

Div issues when resizing browser vertically

Hi,

When I resize my browser from the bottom upwards (for testing purposes) the div that I use for my columns resizes leaving the text behind.

here's a picture of what's happening:

http://i59.tinypic.com/zral5.png

Here's my CSS code:

body {
    font: normal 1em/1.5 sans-serif;
    color: #222;
    background-color: #edeff0;
}

html, body, .main-wrapper, .col {
    height: 100%;
}


.main-wrapper {
    width: 90%;
    margin: auto;
}

* {
    box-sizing: border-box;
}

/************************
Layout colours
************************/
.main-header {background-color:#222;}
.main-logo {background-color:#FF4D4D;}
.main-nav li {background-color:#6699FF;}
.primary-content {background-color:#9966FF;}
.secondary-content {background-color:#CCB2FF;}
.main-footer {background-color:#99E699;}


.main-logo a, .main-nav a {
    color: white;
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 10px 20px;
}

.main-logo {
    border: 4px solid #990000;
    text-shadow: -3px 3px 5px #000;
    box-shadow: -2px 2px 5px #000;
}

.main-header {
    padding: 20px;
    display: table;
    width: 100%;
    height: 150px;
}

.main-logo, .main-nav, .main-nav li, .col {
    display: inline-block;
}

.main-banner {
    background: #66FF66;
    text-align: center;
    padding: 35px 15px;
}

.main-logo, .main-nav {
    display: table-cell;
    vertical-align: middle;
}

.main-logo, .main-nav li {
    border-radius: 5px;
}

.main-nav {
    padding-left: 50px;
}

.main-logo {
    width: 120px;
}

.main-nav li {
    margin-right: 10px;
}

.col {
    padding: 20px;
    margin-right: -5px;
    height: 100%;

}

.primary-content {
    width: 60%;
}

.secondary-content {
    width: 40%;
    vertical-align: top;
}

.main-footer {
    text-align: center;

}

@media (max-width: 640px) {
    .main-logo, .main-nav, .main-nav li {
        display: block;
        width: inital;
        margin: initial;
    }

    .col {
        height: initial;
        width: 100%;
        text-align: center;
    }

    .main-banner {
        display: none;
    }

    .main-nav {
        padding-left: initial;
    }

    .main-nav li {
        margin-top: 15px;
    }

    .main-logo {
        margin: auto;
        width: 100%;
    }

    .secondary-content {
        margin-top: -6px;
    }
}

and here is the necessary html:

<body>
        <div class="main-wrapper">
            <header class="main-header">
                <<h1 class="main-logo"><a href="#">Logo</a></h1>
                <ul class="main-nav">
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </header>
            <div class="main-banner">
                <h1>Main Site Banner!</h1>
                <p>This site is cool!</p>
            </div>
            <div class="primary-content col">
                <h2>Primary Content</h2>
                <p>This column is for the main content of the site. This column is for the main content of the site.
                This column is for the main content of the site. This column is for the main content of the site.
                This column is for the main content of the site. This column is for the main content of the site.
                This column is for the main content of the site. This column is for the main content of the site.
                his column is for the main content of the site. This column is for the main content of the site.
                This column is for the main content of the site. This column is for the main content of the site.</p>
                <p>This column is for the main content of the site. This column is for the main content of the site.

            </div>
            <div class="secondary-content col">
                <h3>Secondary Content</h3>
                <p>This column is for the extra or additional content of the page. This column is for the extra or additional content of the page.
                This column is for the extra or additional content of the page.This column is for the extra or additional content of the page.
                This column is for the extra or additional content of the page.This column is for the extra or additional content of the page</p><hr />
            </div>
            <footer class="main-footer">&copy;2015 - Darren Buckley</footer>
        </div>
    </body>

2 Answers

Jeff Lemay
Jeff Lemay
14,268 Points

Changing the height:100%; property on .col to min-height:100%; fixes that issue.

You have that property set twice, once on line 7 and once on line 84, so you'll need to remove .col from the first one.

Darren Buckley
Darren Buckley
9,151 Points
Darren Buckley
Darren Buckley
9,151 Points

Thank you! that's great.