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

Moises Terrazas
Moises Terrazas
20,499 Points
Posted by Moises Terrazas
Moises Terrazas
20,499 Points

Cant recreate simple column layout : (

I'm trying to recreate the simple column layout on my own and it's pretty difficult for me.

the margin-right property only works when the value is negative 50px and even then it makes the columns clash into each other. the video said that it all depends on font-size but i tried a smaller font-size and it still doesn't work.

'''html <body> <div class="container">

<div class="col right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut pharetra ligula, a adipiscing enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus a metus aliquet, pretium nisl non, pellentesque nisl. Praesent semper massa lectus, eu porttitor odio posuere vitae. Nulla rutrum nibh hendrerit dignissim mollis. Donec auctor odio ullamcorper massa posuere accumsan. Phasellus tristique ipsum gravida, accumsan nisi at, porta nibh. Morbi ut consequat urna. Morbi vel vulputate quam. Praesent a interdum sem, vitae dictum felis. </p>

</div><!--end right column-->

<div class="col left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut pharetra ligula, a adipiscing enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus a metus aliquet, pretium nisl non, pellentesque nisl. Praesent semper massa lectus, eu porttitor odio posuere vitae. Nulla rutrum nibh hendrerit dignissim mollis. Donec auctor odio ullamcorper massa posuere accumsan. Phasellus tristique ipsum gravida, accumsan nisi at, porta nibh. Morbi ut consequat urna. Morbi vel vulputate quam. Praesent a interdum sem, vitae dictum felis. </p>
</div><!-- end of left column-->

</div> <!-- end container  -->

</body>

'''

'''css

  • { border: 1px solid red; }

.container, body { height: 100%; }

.container { width: 90%; margin: 0 auto; }

.col { display: inline-block; padding: 20px; margin-right: -50px; }

.left { width: 60%; }

.right { width: 40%; }

'''

2 Answers

Diane Houghton
Diane Houghton
5,773 Points

Try making your column widths add up to less than 100%. Sometimes there is default margin and padding depending on the browser you are using, and that messes up the alignment. Actually, now that I take a second look at your css, that is the problem. Take out the padding and use margins instead. Padding makes your divs wider, margins make the space between divs wider. You have 80 PC of padding added to 100% width! the -50px margin doesn't make up for that.

Moises Terrazas
Moises Terrazas
20,499 Points
Moises Terrazas
Moises Terrazas
20,499 Points

Thank you so much for your reply! Things really started to click in my head after reading your response. In fact, I got it to work with a 100% width sum between the two divs. Even though this looks extremely simple this really has been a big leap for me as i've been having lots of trouble with this kinda stuff. thanks again.

heres the fix : )

'''

  • { border: 1px solid red; font-size: 12px; }

.container, body { height: 100%; }

.container { width: 90%; margin: 0 auto; }

.col { display: inline-block; margin-right: -5px; }

.left { width: 50%; }

.right { width: 50%; }

p { padding: 20px; }

'''

i added padding to the p tags instead of adding margin on the .col divs

Lauren Katz
Lauren Katz
713 Points
Lauren Katz
Lauren Katz
713 Points

I've set .col to display as inline-block but the primary and secondary content is not resizing. I'm sure it's a tiny mistake in my CSS.

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

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

}

*{
    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-logo a, 
.main-nav a {
    color: white;
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 10px 20px;
}

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

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

.main_wrapper{
width: 90%;
margin: auto;   
}

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

}

.main-nav{

    padding-left: 50px;
}

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

.main-logo{
    width:120px;
}

/* Column Layout
============================*/

.col{
    display: inline-block;
}

.primary-content {
    width: 30%;

}


.secondary-content {
    width: 40%;
}


/* Media Queries
===========================*/
@media(max-width: 768px){
    .main-logo,
    .main-nav,
    .main-nav li{
        display: block;
        width:initial;
        margin: initial;
    }

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

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