Inline-block layout technique issue

Question

Having a problem the inline-block layout technique. My right column does not stretch to the end. I have the 60% 40$ but it doesn't work out any help on this one please.
/* Page Styles
================================ */
body {
    font: normal 1.1em/1.5 sans-serif;
    color: #222;
    background-color: #edeff0;
}
html,
body,
.main-wrapper,
.col {
    height: 100%;
}
/.main-wrapper{
    width: 90%;
    margin: 0 auto;
}/
/* 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;
}
.main-banner {
text-align: center;
}
.main-logo,
.main-nav,
.main-nav li{
    display: inline;
}
.main-logo,
.main-nav li {
    padding: 10px 20px;
    border-radius: 5px;
}
.main-nav li {
margin-right: 10px;
}
.main-logo {
    margin-right: 50px;
}
.main-logo a, 
.main-nav a {
    color: white;
    text-decoration: none;
}
.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: 30%;
}
/* Column layout
================================ */
@media(max-width: 768px) {
.main-logo,
.main-nav,
.main-nav li,
.col{
    display: block;
    width: initial;
    height: initial;
    margin: initial;
}

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

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

.main-banner {
    display: none;
}
}

jobbol · Answer

Problem  
Your problem lies in the way the webpage renders spacing between your columns.  Inline-block elements get treated like separate words in a sentence, complete with the little spaces between.
You expect the width to add up like this,  
40% + 60% = 100%  
When in fact it's closer to this,  
40% + 4px + 60% = 101% (estimate).  
That 4px from the whitespace is causing the width to go over 100% and making the line wrap.  So what can you do?  
Solutions  
1.)  If you don't care about background, you can make your columns slightly smaller.  Do something like 39% + 60%.
2.) You can also set a negative margin which will squeeze them together.  
3.) CSS tricks also addresses this problem with a bunch of weird fixes you may not like.  Take a look. (https://css-tricks.com/fighting-the-space-between-inline-block-elements/)

Christopher Misa · Answer

I'm not quite sure what's going on here but I noticed under the "Column layout" section you have:
.primary-content { width: 60%; }
.secondary-content { width: 30%;
}
Maybe you intend the .secondary-content class to be width: 40%?

Welcome to the Treehouse Community

Looking to learn something new?

Christopher Lewis

Christopher Lewis

Inline-block layout technique issue

2 Answers

Christopher Misa

Christopher Misa

jobbol

jobbol