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 CSS Layout Techniques Display Modes Column Layout with Inline-Block

Phil White
PLUS
Phil White
Courses Plus Student 9,519 Points

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?

Keith Kelly
Keith Kelly
21,326 Points

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

Phil White
Phil White
Courses Plus Student 9,519 Points

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

Keith Kelly
Keith Kelly
21,326 Points

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.

Phil White
Phil White
Courses Plus Student 9,519 Points

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

Keith Kelly
Keith Kelly
21,326 Points

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.

Phil White
Phil White
Courses Plus Student 9,519 Points
<!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>
Phil White
Phil White
Courses Plus Student 9,519 Points
/** 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

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

Dominick Triola
Dominick Triola
5,079 Points

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.

Placid Rodrigues
Placid Rodrigues
12,630 Points

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

Keith Kelly
Keith Kelly
21,326 Points

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.

Phil White
Phil White
Courses Plus Student 9,519 Points

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;
    }
Keith Kelly
Keith Kelly
21,326 Points

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

Phil White
PLUS
Phil White
Courses Plus Student 9,519 Points

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

Keith Kelly
Keith Kelly
21,326 Points

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.

Phil White
Phil White
Courses Plus Student 9,519 Points

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

Keith Kelly
Keith Kelly
21,326 Points

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;
    }
}
Phil White
Phil White
Courses Plus Student 9,519 Points

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...

Phil White
Phil White
Courses Plus Student 9,519 Points

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?

Keith Kelly
Keith Kelly
21,326 Points

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.

Phil White
Phil White
Courses Plus Student 9,519 Points

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?

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.