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

Christine Petterssen
Christine Petterssen
920 Points
Posted by Christine Petterssen
Christine Petterssen
920 Points

height 100%

I am using the "height: 100%" property to ensure the page fills up the full height of the browser window, as shown in the video, but I am having an issue with text/divs flowing outside of a container, which is not expanding to the full height of its contents.

I have slightly changed the structure of the page in this tutorial by adding wrappers that allow the header and footer to expand the full width of the page, and then added a div with a class = "content-wrapper" around the "primary-content" and "secondary-content" divs (both of which have a "col" class as well). My issue is that the divs with class .col expand/flow outside of the "content-wrapper". There are no floats involved.

Any help appreciated.

I think the relevant css is:

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

.content-wrapper { width: 80%; margin: 20px auto; padding: 10px 20px; }

.col { display: inline-block; padding: 20px; vertical-align: top; }

.primary-content, .secondary-content { margin-bottom: 10px; }

.primary-content { width: 60%; margin-right: 6px; }

.secondary-content { width: 39%; }

Robert Stewart
Robert Stewart
11,921 Points
Robert Stewart
Robert Stewart
11,921 Points

Using your code, I found that the primary and secondary content areas were displaying on separate lines instead of the same line. The fix for that is to add the margin-right: -5px; to your .col markup like so:

.col {
    display: inline-block;
    padding: 20px;
    margin-right: -5px;
    vertical-align: top;
}

However, the rest of the page displayed fine on my end so, if that's not the problem you were having, we'll need to see more of your CSS and/or HTML markup before we can figure it out.

5 Answers

Christine Petterssen
Christine Petterssen
920 Points
Christine Petterssen
Christine Petterssen
920 Points

Thanks...I missed that I had the margin-right in the wrong place. I seemed to have fixed the height issue for the normal view - when i moved the banner container out of my content-wrapper the height of the content-wrapper adjusted to fit the height of the col container. The problem still exists when i resize the browser to narrow width, the content-wrapper does not expand to height of both col and footer stays at the bottom of the content-wrapper (so the second col goes behind the footer and expands down below. There is no particular reason why i have the primary/secondary content inside of a wrapper, but I feel like I am not quite grasping this concept if I can't get it to work.

here is the HTML, with full css below. Any help appreciated.

<!DOCTYPE html> <html> <head> <title>2 Display Modes</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style-2.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="banner">
            <h1>MY BANNER!</h1>
            <p>Bacon ipsum dolor sit amet chicken pork ground<p>
        </div>

        <div class="content-wrapper">
            <div class="primary-content col">
                <h2>Primary Content</h2>
                <p>Bacon ipsum dolor sit amet chicken pork ground round brisket corned beef ball tip shank tail salami filet mignon ham hock pork belly venison shankle. Pig kielbasa drumstick sausage pork chop boudin. Chicken t-bone salami pork chop, beef ribs kevin ham tri-tip beef venison biltong brisket.</p>
                <p>Venison strip steak meatball chicken, brisket prosciutto sirloin. Capicola drumstick brisket tri-tip salami. Chicken beef jerky, tail turkey prosciutto cow ham sirloin boudin tenderloin. Meatloaf tri-tip turducken brisket andouille, pork belly corned beef fatback hamburger.</p>
            </div>
            <div class="secondary-content col">
                <h3>Secondary Content</h3>
                <p>Strip steak tenderloin kevin swine meatloaf capicola, doner beef turducken pancetta corned beef pork loin shoulder.</p>
                <hr>
                <p>Pork filet mignon leberkas, tail swine venison pancetta turkey shoulder brisket chalkers likes hamburgers.</p>
            </div>
        </div>
    <footer class="main-footer">
            <p>&copy;2014 Example Layout</p>
    </footer>
</div>

</body> </html>

/* Page Styles ================================ */

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

body { font-family: tahoma, sans-sarif; font-size: 1.3 em; line-height: 1 em; color: black; background: pink; } .main-wrapper { margin: auto; width: 80%; }

  • { box-sizing: border-box; -moz-box-sizing: border-box; }

.main-header { background-color: #000000; } .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: #000000; }

/* HEADER, BANNER AND FOOTER LAYOUT ================================ */

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

.banner { background-color: #464646; width: 100%; padding: 20px; text-align: center; }

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

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

.main-logo { width: 150px; }

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

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

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

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

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

.main-footer{

padding: 30px;
color: white;
text-align: center;

}

/* COLUMN LAYOUT ================================ */

.content-wrapper { background-color: #ffffff; padding: 10px; }

.col { display: inline-block; padding: 20px; vertical-align: top; margin-right: -5px; }

.primary-content { width: 60%; }

.secondary-content { width: 40%; }

/* MEDIA QUERIES ================================ */

@media (max-width: 768px) {

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


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

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

}

Christine Petterssen
Christine Petterssen
920 Points
Christine Petterssen
Christine Petterssen
920 Points

i apologize, i have watched the "tips for posting" video several times and can't understand what he is saying about what to use before and after to wrap the code, and i've zoomed in the video and can't tell what characters they are either. i don't want to repost the whole code and get it wrong again. can't seem to edit a post once it is posted.

so if someone could let me know the proper way to post code i would appreciate that as well.

Robert Stewart
Robert Stewart
11,921 Points
Robert Stewart
Robert Stewart
11,921 Points

Well, I've found the problem with your site. The reason everything is going outside the .main-wrapper is because of the way the box-model is rendered in most browsers. In other words you set the width to 100% and, because of the way browsers render padding and margins, your padding gets added to that so you have 100% + 20px. The 100% takes up the whole area and the padding essentially puts it over.

There are two ways to fix this: (Starting with the easiest)

.item-to-display {
    width: 100%;
    padding: 0px 20px;
    box-sizing: border-box;
}

This basically tells the browser to factor the padding into the 100% calculation instead of adding the padding afterward.

The other method of fixing this is to do some math and subtract your padding from your width like so:

.item-to-display {
    width: 98%;
    padding: 0 1%; /* Since padding is applied to left and right it equals 2% total */
}

This should fix your problem:

.main-header, .banner, .col {
    box-sizing: border-box;
}

On the subject of placing code within posts on these forums, you have to have a blank line before that actual code block begins (```) and a space after the code block ends or it won't render properly.

Like so:

<!-- Blank Line Here -->
<3 Backticks here>(code type here)
insert code here
<3 Backticks here>
<!-- Blank Line Here -->
Christine Petterssen
Christine Petterssen
920 Points
Christine Petterssen
Christine Petterssen
920 Points

i have box-sizing applied as a universal selector:

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
Robert Stewart
Robert Stewart
11,921 Points
Robert Stewart
Robert Stewart
11,921 Points

Ah, it appears that the asterisk didn't get copied when I copied your code. However, now that I put the asterisk where it needs to be I'm not seeing any problems with the page in Chrome or Internet Explorer.

What programs are you using to write and run your code? (i.e. Sublime Text, Dreamweaver, Chrome, Firefox, etc)

Robert Stewart
Robert Stewart
11,921 Points
Robert Stewart
Robert Stewart
11,921 Points

I just tested your code in Chrome, Internet Explorer, and Firefox without any problems. I did notice that a friend's Dreamweaver CS6 doesn't preview your code properly.

Anyway, here is a CodePen with the code as I have it. As far as I can tell it works.