-1

http://jsfiddle.net/w3hqjczv/

* {
box-sizing: border-box;

}

.clearfix {
  overflow: auto;
}


html, body, ul{
    margin: 0;
    padding: 0px;
}

div#wrapper {
    width: 1140px;
}

section {
    margin:0;
}

.top-nav {
    margin: auto 0;
    text-align: center;
    background-color: black;
}

.top-nav li a {
    text-decoration: none;  
    font-family: Montserrat;
    color: white;
    padding: 0 20px 0 20px;
}

.top-nav li a:hover {
    color: black;   
    background-color: white;
}

nav li {
    display: inline;    
}

section.col34pc {
    padding: 10px;
    width: 34%;
    background-color: pink;
    display: inline-block;  
}

section.col33pc {
    padding: 10px;
    width: 33%;
    background-color: pink;
    display: inline-block;  
}

section.col16pc {
    padding: 10px;
    width: 16%;
    background-color: pink;
    display: inline-block;  
}

Why does 33 + 34 + 33 not equal 100%?

I've come across this before and I can't for the life of me remember how or where or why.

Pretty basic stuff I imagine.

First post here so do be nice!

BeezleWax
  • 1
  • 3
  • Whitespace (including new lines) creates vertical space when you're working with inline display properties. This is a duplicate of so, so many questions. – Etheryte Nov 27 '14 at 19:55
  • possible duplicate of [3 inline-block divs with exactly 33% width not fitting in parent](http://stackoverflow.com/questions/15653017/3-inline-block-divs-with-exactly-33-width-not-fitting-in-parent) – Etheryte Nov 27 '14 at 19:57

1 Answers1

1

It's due to the whitespace between those elements. Try placing them on the same line in your code editor.

E.g.

<section class="col33pc">
    <h1>Header here</h1>
    <p>Some text here and here and ere</p>
</section><section class="col34pc">
    <h1>Header here</h1>
    <p>Some text here and here and ere</p>
</section><section class="col33pc">
    <h1>Header here</h1>
    <p>Some text here and here and ere</p>
</section>

Update:
As @Zaqx commented, display: flex on parent also works, but unfortunately not in IE9 (required by most clients). Some browsers need vendor prefixes (CSS Tricks article):

.wrap-around-col33pc-col34pc {
    display: -webkit-box;      /* iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* IE 10 */
    display: -webkit-flex;     /* Older versions of Chrome */
    display: flex;
}
Nelu
  • 16,644
  • 10
  • 80
  • 88
  • 1
    For obvious duplicates like these you should try to flag as a duplicate instead of writing an answer. Answering duplicates does nothing to help the site's quality, rather the reverse. – Etheryte Nov 27 '14 at 19:58
  • You can also solve this by setting the parent to `display:flex`. Or placing HTML comments between the tags. Those are the best three options. – Zaqx Nov 27 '14 at 19:58
  • The 'display: flex;' on a parent seems to work wonders here. Cheers. removing all the white space seems like an odd thing to do formatting wise though. – BeezleWax Nov 27 '14 at 20:31