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

Watch Video

Posted July 7, 2014 4:27pm by

Problem with text overflowing their containers and into my footer

Hi,

I followed the tutorial step by step and sure that i have done everything correct but when i minimize the window my text from .primary-content and .secondary-content overflows the footer and goes on further down the page...

How do i fix?

July 7, 2014 4:31pm

Could you post your html and cs code so we can take a look?

July 7, 2014 4:33pm

Yeah sure is there a better way of pasting it in here rather then traditional copy and paste?

July 7, 2014 4:34pm

I think copy and paste would be the easiest way. Take a look at the markdown cheat sheet as well in order to get the proper formatting.

July 7, 2014 4:39pm

Where do i put the ``` so all my code is in the viewer

July 7, 2014 4:46pm

You can put the code in your comment. Just type the 3 backticks then paste your code on the next line after the backticks. Then you can close the code with 3 more backticks on the line after your code.

July 7, 2014 4:47pm

<!DOCTYPE html>
<html>
<head>
    <title>Display Modes</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<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="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
        </ul>
    </header>
    <div class="primary-content col">
        <h2>Primary Content</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula vehicula malesuada. Nulla eget convallis erat, viverra ullamcorper nibh. Curabitur vitae neque adipiscing, vestibulum justo vitae, pretium neque. Aenean a volutpat sem. Morbi porta nisi leo, at fermentum eros pulvinar sit amet. Mauris adipiscing eget sem a lobortis. Sed consectetur enim nulla, sit amet posuere erat eleifend non. Pellentesque tempus tincidunt nisi, et accumsan libero mattis nec. Etiam auctor risus mi, ut molestie nisi lacinia vel. Vestibulum commodo dui sit amet sapien imperdiet, eget molestie dolor consectetur. Nam id velit quis urna posuere sodales eu ac dolor. </p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula vehicula malesuada. Nulla eget convallis erat, viverra ullamcorper nibh. Curabitur vitae neque adipiscing, vestibulum justo vitae, pretium neque. Aenean a volutpat sem. Morbi porta nisi leo, at fermentum eros pulvinar sit amet. Mauris adipiscing eget sem a lobortis. Sed consectetur enim nulla, sit amet posuere erat eleifend non. Pellentesque tempus tincidunt nisi, et accumsan libero mattis nec. Etiam auctor risus mi, ut molestie nisi lacinia vel. Vestibulum commodo dui sit amet sapien imperdiet, eget molestie dolor consectetur. Nam id velit quis urna posuere sodales eu ac dolor. </p>
    </div>
    <div class="secondary-content col">
        <h3>Secondary Content</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula vehicula malesuada. Nulla eget convallis erat, viverra ullamcorper nibh. Curabitur vitae neque adipiscing, vestibulum justo vitae, pretium neque. Aenean a volutpat sem. Morbi porta nisi leo, at fermentum eros pulvinar sit amet. Mauris adipiscing eget sem a </p>
        <hr>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula vehicula malesuada. Nulla eget convallis erat, viverra ullamcorper nibh. Curabitur vitae neque adipiscing, vestibulum justo vitae, pretium neque. Aenean a volutpat sem. Morbi porta nisi leo, at fermentum eros pulvinar sit amet. Mauris adipiscing eget sem a </p>
    </div>

    <footer class="main-footer">
        <p>&copy;2014 Example Layout</p>
    </footer>
    </div>
</body>
</html>

July 7, 2014 4:48pm

/** Page styles **/

body {
    font: normal 1.1em/1.5 sans-serif;
    color: #222;
    background-color: #edeff0;
    width: 90%;
    margin: auto;
}
html,
body,
.main-wrapper,
.col {
    height: 100%;
}

.main-wrapper {
    width: 90%;
    margin: auto;
} 
* {
    box-sizing: border-box;
}

/** Layout Element Colors **/

.main-header { background-color: #384047; }
.main-logo { background-color: #5fcf80; }
.main-nav li { background-color: #3f8abf; }
.primary-content { background-color: #caebf6; }
.secondary-content { background-color: #bfe3d0; }
.main-footer { background-color: #b7c0c7; }

/** Header, Banner and Footer Layout **/

.main-header {
    padding: 20px;
    display: table;
    width: 100%;
    min-height: 150px;
}
.main-logo,
.main-nav,
.main-nav li {
    display: inline-block;
    vertical-align: middle;
}
.main-logo,
.main-nav {
    display: table-cell;
}

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

.main-logo {
    width: 120px;
    min-height: 150px;
}
.main-nav {
    padding-left: 50px;
}


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

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

/** Column Layout **/

.col {
    display: inline-block;
    padding: 20px;
    margin-right: -5px;
    vertical-align: top;
}
.primary-content {
    width: 60%;
}
.secondary-content {
    width: 40%;
}


/** Media Quearies **/

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

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

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

5 Answers

December 15, 2014 6:54pm

Same here guys.

Although i do belive there would still be a problem in Guils example also, since in the video he didn't really resized the browser to where the problem is.

So it didn't really show up anyway.

hugs,

Hugo

March 20, 2015 8:27am

I think Hugo da Silva Ribas is right here.

February 24, 2015 10:27pm

I noticed this issue as well. It seems that if you don't have the "col" class at height: 100% then the overflow issue doesn't occur. But then you'll have some white space between your secondary column and your footer, and the footer won't be truly sticky if there's not enough content on the page to push it all the way to the bottom.

March 20, 2015 8:35am

It seems that Dominick Triola and Hugo da Silva Ribas are right here. I request Guil Hernandez to kindly suggest regarding this issue.

July 7, 2014 5:07pm

In the video Gill adds a media query for the columns so that they stack properly on smaller devices. He does this by adding a .col after the .main-nav li and changing the height property back to initial. This allows the columns to stack properly and eliminates any overflow issues. The updated portion of the media query would look like this:

   .main-logo,
   .main-nav,
   .main-nav li,
   .col {
        display: block;
        height: initial;
        width: initial;
        margin: initial;
    }

I tested this code in a workspace and it seems to work correctly.

July 7, 2014 5:13pm

Ive added in what you said but im still getting the same problem? Below is what i did...

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

July 7, 2014 5:16pm

So when you refresh and resize the columns do not stack?

July 7, 2014 5:18pm

No it just overflows as before... could it be a problem with my html?

July 7, 2014 5:23pm

It sounds to me to be more of a css issue. I am slightly confused because I copied the html and css you posted into my own workspace and only made the change I posted and everything works as expected.

July 7, 2014 5:26pm

Ok, can you paste your css on here please and then ill try to use that?

July 7, 2014 5:28pm

Sure. Here is what I have:

/** Page styles **/

body {
    font: normal 1.1em/1.5 sans-serif;
    color: #222;
    background-color: #edeff0;
    width: 90%;
    margin: auto;
}
html,
body,
.main-wrapper,
.col {
    height: 100%;
}

.main-wrapper {
    width: 90%;
    margin: auto;
} 
* {
    box-sizing: border-box;
}

/** Layout Element Colors **/

.main-header { background-color: #384047; }
.main-logo { background-color: #5fcf80; }
.main-nav li { background-color: #3f8abf; }
.primary-content { background-color: #caebf6; }
.secondary-content { background-color: #bfe3d0; }
.main-footer { background-color: #b7c0c7; }

/** Header, Banner and Footer Layout **/

.main-header {
    padding: 20px;
    display: table;
    width: 100%;
    min-height: 150px;
}
.main-logo,
.main-nav,
.main-nav li {
    display: inline-block;
    vertical-align: middle;
}
.main-logo,
.main-nav {
    display: table-cell;
}

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

.main-logo {
    width: 120px;
    min-height: 150px;
}
.main-nav {
    padding-left: 50px;
}


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

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

/** Column Layout **/

.col {
    display: inline-block;
    padding: 20px;
    margin-right: -5px;
    vertical-align: top;
}
.primary-content {
    width: 60%;
}
.secondary-content {
    width: 40%;
}


/** Media Queries **/

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

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

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

July 7, 2014 5:34pm

I copied exactly what you put and having the same problem plus i just tried it in fire fox and ie on top of chrome and they are all the same...

July 7, 2014 5:42pm

I just noticed that it is fine on full width and works fine at mobile width. its more at tablet width and higher that i have the problem. Might i need to change the

@media (max-width: 760px)

or add another media query?

July 7, 2014 5:45pm

You could either change your max-width or create another media query. I would probably add another media query to target tablet widths. That would give you more control over the layout. Sorry I didn't notice that I was reviewing the site on a smaller layout.

July 7, 2014 5:48pm

Ok so would i do this again

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

and then change the amount of px? How many px would you suggest?

July 21, 2014 1:39am

Doesn't your opening line for media query need to be @media only screen and (max-width: 760) { ? The 'only' is supposed to be optional but preferred, but I think the rest has to be in there.

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Phil White

Phil White

Problem with text overflowing their containers and into my footer

Keith Kelly

Keith Kelly

Phil White

Phil White

Keith Kelly

Keith Kelly

Phil White

Phil White

Keith Kelly

Keith Kelly

Phil White

Phil White

Phil White

Phil White

5 Answers

Hugo da Silva Ribas

Hugo da Silva Ribas

Placid Rodrigues

Placid Rodrigues

Dominick Triola

Dominick Triola

Placid Rodrigues

Placid Rodrigues

Keith Kelly

Keith Kelly

Phil White

Phil White

Keith Kelly

Keith Kelly

Phil White

Phil White

Keith Kelly

Keith Kelly

Phil White

Phil White

Keith Kelly

Keith Kelly

Phil White

Phil White

Phil White

Phil White

Keith Kelly

Keith Kelly

Phil White

Phil White

Chris Wiley

Chris Wiley