Set container to 50% width - html

I like the Masonry style effect on this example.
CodePen: https://codepen.io/anon/pen/dZxxjm
Is it possible to set the container width to 50% and still get the same effect of box alignment?
*, *:before, *:after {box-sizing: border-box !important;}
.row {
-moz-column-width: 40em;
-webkit-column-width: 40em;
-moz-column-gap: .5em;
-webkit-column-gap: .5em;
}
.panel {
display: inline-block;
margin: .5em;
padding: 0;
width:98%;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h3>Masonry CSS with Bootstrap Panels</h3>
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel</div>
<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam in felis sit amet augue.</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue orc. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Content here..
Aliquam in felis sit amet augue.</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel</div>
<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">ng elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.</div>
</div>
</div>
</div>


Sure there is.
However, I must outline overriding .row and .panel classes like this will pretty much break layout functionality of Bootstrap. You're better off adding your custom class (used .columns below but feel free to rename it) to this section making sure these overrides don't affect the rest of your website. Anyways, here's what you probably want:
.columns *, .columns *:before, .columns *:after {box-sizing: border-box !important;}
.row.columns {
-moz-column-width: 2;
-webkit-column-width: 2;
-moz-column-gap: .5em;
-webkit-column-gap: .5em;
columns: 2;
padding: 0 15px;
}
.columns .panel {
display: inline-block;
margin: .5em;
padding: 0;
width: calc(100% - 15px);
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h3>Masonry CSS with Bootstrap Panels</h3>
<div class="row">
<div class="col-xs-6">
<div class="row columns">
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel</div>
<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam in felis sit amet augue.</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue orc. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Content here..
Aliquam in felis sit amet augue.</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel</div>
<div class="panel-body">Content here.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">ng elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.</div>
</div>
</div>
</div></div></div>
If it's not, you most likely need to clarify what you want to achieve.


Do you mean something like this?
If this is what you want, just add
width:50%;
to the row class (see picture).
If this is not what you want, please detail better.

Related

Div disappearing on resize

I have a simple markup in which I am looking to stack two columns when below medium screen size. I am using bootstrap to achieve this, however only one of the columns stacks and the other disappears. The div that disappears is #purple-div
Any ideas?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="staff" class="row py-5">
<div class="col-md-6">
<div id="purple-div">
<div id="staff-img"></div>
</div>
</div>
<div class="col-md-6">
<h4>Staff</h4>
<p>Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo
eget malesuada. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus
convallis quis ac lectus.</p>
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget
consectetur sed, convallis at tellus. Sed porttitor lectus nibh. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Sed porttitor lectus nibh.</p>
</div>
</div>

Below medium size is (xs-sm), so you must change col-md-6 to col-6

Make column elements equal height on each row

This is the layout I want to get:
So regardless of what's contained in these divs, I want all of them to stretch to the height of the largest div on that row so that everything remains alligned.
However, I cannot think of a way that I can make the items have the same height so that they are all aligned. I could use CSS tables (using display: table), but then I'd need to split it up by rows, as opposed to columns, so the semantics would get messed up.
Other than display: table, I feel like there should be a way with flexbox, but I can't for the life of me figure out what it could be. I can make the container div the same with flex by adding another container around the columns, but I'm not sure how I'd use that to make the children have the same height.
I could also use Javascript to loop through all of them, but that fees like a horrible, inefficient solution.
Here's some code which shows A) What I want to have, regardless of the content inside the divs, and B) what currently happens.
Codepen
* {
font-family: Helvetica, sans-serif;
}
h2 {
text-align: center;
clear: both;
padding-top: 2em;
}
.col {
float: left;
width: 30%;
background-color: #ebebeb;
margin-left: 1em;
}
.col div {
padding: 1em;
width: 80%;
margin: 0 auto;
}
.col .sectionOne {
background-color: #2b2b2b;
color: #fff;
}
.col .sectionTwo {
background-color: #5f5f5f;
color: #fff;
margin-top: 1em;
}
.col .sectionThree {
background-color: #8c8c8c;
color: #fff;
margin-top: 1em;
}
<h2>Everything Aligned. The world is a happy place.</h2>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<h2>Misaligned. Chaos descends.</h2>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus
et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing elit.Lorem ipsum
dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
EDIT:
Each .col represents a post in the Wordpress archive page, so it must be arranged in columns.

The only way to do that with Flexbox, if not to use script, is to remove the col and use the order property to visually position them column wise.
The reason is simple, the sections need to be siblings to enable equal height per row.
Based on how many items it will be, one might need to group them to keep the necessary CSS rules on a reasonable level, though as that is not available in the question, I here show a solution based on the existing amount of items.
As a replacement for the removed col's background color, I used a border to make it simple, but one can i.e. use pseudo elements or an extra inner element to accomplish the same effect.
Updated codepen
Stack snippet
* {
font-family: Helvetica, sans-serif;
}
.cols {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.cols div {
padding: 1em;
border: 1em solid #ebebeb;
box-sizing: border-box;
width: 30%;
}
.cols .sectionOne {
background-color: #2b2b2b;
color: #fff;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.cols .sectionTwo {
background-color: #5f5f5f;
color: #fff;
border-width: 0 1em 1em 1em;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.cols .sectionThree {
background-color: #8c8c8c;
color: #fff;
border-width: 0 1em 1em 1em;
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
<div class="cols">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus
et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing elit.Lorem ipsum
dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
Updated
As mentioned, and as a sample for more than 3 posts, and a 3 column layout, one can simply repeat the above solution, with an extra rule giving all but the first cols a top margin.
Stack snippet
* {
font-family: Helvetica, sans-serif;
}
.cols {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.cols + .cols {
margin-top: 1em;
}
.cols div {
padding: 1em;
border: 1em solid #ebebeb;
box-sizing: border-box;
width: 30%;
}
.cols .sectionOne {
background-color: #2b2b2b;
color: #fff;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.cols .sectionTwo {
background-color: #5f5f5f;
color: #fff;
border-width: 0 1em 1em 1em;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.cols .sectionThree {
background-color: #8c8c8c;
color: #fff;
border-width: 0 1em 1em 1em;
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
<div class="cols">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus
et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing elit.Lorem ipsum
dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<div class="cols">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa.
</div>
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus.
</div>
</div>

In the futur , you may use grid and a single container:
* {
font-family: Helvetica, sans-serif;
}
h2 {
text-align: center;
clear: both;
padding-top: 2em;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1em;
background: repeating-linear-gradient(to right, transparent 1%, #ebebeb 1%, #ebebeb 33%, transparent 33%, transparent 34%);
}
div {
padding: 1em;
}
div div {
margin: 0 4%;
}
.sectionOne {
background-color: #2b2b2b;
color: #fff;
grid-row: 1
}
.sectionTwo {
background-color: #5f5f5f;
color: #fff;
grid-row: 2
}
.sectionThree {
background-color: #8c8c8c;
color: #fff;
}
.grid {counter-reset:div}
.grid>div:before {
counter-increment:div;
content:'div number:'counter(div);
background:yellow;
color:red;
padding:0 0.5em;
font-size:0.75em;
}
<h2>Everything Aligned. The world is a happy place.</h2>
<div class="grid">
<!-- first post-->
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur
in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
<!-- end first post-->
<!-- second post-->
<div class="sectionOne">
Lorem ipsum dolor sit amet, <br/>consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
<!-- end second post-->
<!-- third post-->
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus lorem
</div>
<!-- end third post-->
</div>
usefull ressource :
https://css-tricks.com/snippets/css/complete-guide-grid/
http://gridbyexample.com/
and the codepen to play with
Are you arrived in the future yet ? check it out here http://caniuse.com/#search=grid ;)

This can be accomplished with flexbox, though note that it isn't fully supported in Internet Explorer 11.
First, replace your float: left on .col with display: flex.
Second, move your margin-top: 1em declarations to .col.
* {
font-family: Helvetica, sans-serif;
}
h2 {
text-align: center;
clear: both;
padding-top: 2em;
}
.col {
display: flex;
margin-top: 1em;
background-color: #ebebeb;
}
.col div {
padding: 1em;
width: 80%;
margin: 0 auto;
}
.col .sectionOne {
background-color: #2b2b2b;
color: #fff;
}
.col .sectionTwo {
background-color: #5f5f5f;
color: #fff;
}
.col .sectionThree {
background-color: #8c8c8c;
color: #fff;
}
<h2>Everything Aligned. The world is a happy place.</h2>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<h2>Misaligned. Chaos descends.</h2>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus
et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing elit.Lorem ipsum
dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
Note that flexbox doesn't have collapsing margins or anything like border-spacing for tables. This can be resolved by setting margin on .col div, though you may want to change the background.
Also, your use of the name .col is counter-intuitive, as you actually have three sections per row. You might want to watch out for that!
Hope this helps! :)

If you organize them in rows instead of columns, you can use display: flexon the (row) containers, which has the effect you want. Note: I also used fixed (percentage) width settings on the child elements to achieve this.
.col {
display: flex;
margin-bottom: 10px;
}
.col>div {
width: 31%;
margin: 1%;
background: #ddd;
}
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus
et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>
<div class="col">
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing elit.Lorem ipsum
dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
</div>

Here's a simple solution using CSS Grid Layout.
Features:
all rows are the height of the tallest element in the row
the elements flow in columns, not rows
extra HTML containers can be removed
the code is simple and efficient
codepen
body {
display: grid;
grid-template-rows: repeat(3, auto);
grid-auto-columns: 1fr;
grid-auto-flow: column;
grid-gap: 1em;
padding: 1em;
}
.sectionOne { background-color: #2b2b2b; }
.sectionTwo { background-color: #5f5f5f; }
.sectionThree { background-color: #8c8c8c; }
div { padding: 1em; color: #fff; }
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
<div class="sectionOne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
Browser Support for CSS Grid
Chrome - full support as of March 8, 2017 (version 57)
Firefox - full support as of March 6, 2017 (version 52)
Safari - full support as of March 26, 2017 (version 10.1)
Edge - full support as of October 16, 2017 (version 16)
IE11 - no support for current spec; supports obsolete version
Here's the complete picture: http://caniuse.com/#search=grid

Why is there a space before first column in skeleton?

I am using skeleton. I am using one-third column three times. But the third one is not on the same line and is breaking away from the row. It is in the next line.
Also there is a white space before the first column.
I am using following HTML code!
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div class="one-third column feature">
<h2>Feature</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
<div class="one-third column feature">
<h2>Perfomance</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
<div class="one-third column feature">
<h2>Trial</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>

The default margin-left for .column is 4% and the width of each column is 30.6667%, so that adds up to (30.6667% + 4%) * 3 = 104.0001%. That is pushing the last column to the next line.
You need to overwrite the margin-left to 2.6%, which will add up to (30.6667% + 2.6%) * 3 = 99.8001%
.column {
margin-left: 2.6% !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div class="one-third column feature">
<h2>Feature</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
<div class="one-third column feature">
<h2>Perfomance</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
<div class="one-third column feature">
<h2>Trial</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>

I had the same problem. The solution is wrapping these 3 "one-third column" with ... columns here ..
#chipChocolate we use CSS frameworks for avoiding this kind of detailed calculations. adding row is framework's provided way.
I hope this helps
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div class="row"><!-- row for one-third -->
<div class="one-third column feature">
<h2>Feature</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
<div class="one-third column feature">
<h2>Perfomance</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
<div class="one-third column feature">
<h2>Trial</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
</div><!-- End of row -->

Just put your code between <div class="row"> and </div>

bootstrap tumblr-like grid system

I'd like to have a tumblr-like grid layout for my bootstrap website. (example) The code below shows what I have right now using the grid system of bootstrap (my guess is that it is not designed to do things like this). Too bad some do not line up.
<article class="col-md-6">
<blockquote class="panel panel-default">
<div class="panel-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
venenatis. Donec aliquam leovenenatis. Donec aliquam leo mi, vel fringilla purus commodo eget. Vivamus sit amet sapien sed
mauris sodales ultrices vitae eget nisl. Nulla malesuada rhoncus mauris. Praesent vestibulum
auctor lorem mollis ornare.venenatis. Donec aliquam leo mi, vel fringilla purus commodo eget. Vivamus sit amet sapien sed
mauris sodales ultrices vitae eget nisl. Nulla malesuada rhoncus mauris. Praesent vestibulum
auctor lorem mollis ornare. mi, vel fringilla purus commodo eget. Vivamus sit amet sapien sed
mauris sodales ultrices vitae eget nisl. Nulla malesuada rhoncus mauris. Praesent vestibulum
auctor lorem mollis ornare.
</p>
<footer class="text-right">
#1 — Maandag 20 januari 2014 — <cite>X</cite>
</footer>
</div>
</blockquote>
</article>
<article class="col-md-6">
<blockquote class="panel panel-default">
<div class="panel-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut lor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum nec, pulvinlor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum nec, pulvinlor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum nec, pulvin
fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
venenatis. Donec
</p>
<footer class="text-right">
#1 — Maandag 20 januari 2014 — <cite>X</cite>
</footer>
</div>
</blockquote>
</article>
<article class="col-md-6">
<blockquote class="panel panel-default">
<div class="panel-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
venenatis. Donec um dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
venenatis. Donec
</p>
<footer class="text-right">
#1 — Maandag 20 januari 2014 — <cite>X</cite>
</footer>
</div>
</blockquote>
</article>
<article class="col-md-6">
<blockquote class="panel panel-default">
<div class="panel-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
venenatis. Donec
</p>
<footer class="text-right">
#1 — Maandag 20 januari 2014 — <cite>X</cite>
</footer>
</div>
</blockquote>
</article>
<article class="col-md-6">
<blockquote class="panel panel-default">
<div class="panel-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
venenatis. Donec aliquam leo mi, vel fringilla purus commodo eget. Vivamus sit amet sapien sed
mauris sodales ultrices vitae eget nisl. Nulla malesuada rhoncus mauris. Praesent vestibulum
auctor lorem mollis ornare.venenatis. Donec aliquam leo mi, vel fringilla purus commodo eget. Vivamus sit amet sapien sed
mauris sodales ultrices vitae eget nisl. Nulla malesuada rhoncus mauris. Praesent vestibulum
auctor lorem mollis ornare.
</p>
<footer class="text-right">
#1 — Maandag 20 januari 2014 — <cite>X</cite>
</footer>
</div>
</blockquote>
</article>
<article class="col-md-6">
<blockquote class="panel panel-default">
<div class="panel-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum ne
</p>
<footer class="text-right">
#1 — Maandag 20 januari 2014 — <cite>X</cite>
</footer>
</div>
</blockquote>
</article>
JSfidle (you might have to enlarge the Result panel because the responsive design)
I wonder how I can make all columns show next or below the previous one without some massive gaps like there are now.

First add a parent layer of row and col and decide how many columns you want for the widest screen resolution (in this case 2 so we use col-md-6). Then for each column, add one other row with multiple columns in it.
<div class="row">
<div class="col-md-6">
<div class="row>
<article class=col-md-12>...</article>
<article class=col-md-12>...</article>
<article class=col-md-12>...</article>
</div>
</div>
<div class="col-md-6">
<div class="row>
<article class=col-md-12>...</article>
<article class=col-md-12>...</article>
<article class=col-md-12>...</article>
</div>
</div>
</div>
So basically you're using the child rows as columns of the parent. I hope this makes sense.
I've updated your jsfiddle
Also for reference, here's the Bootstrap documentation regarding grids.
EDIT:
If you want to do it like on Tumblr, then you will need to load Masonry. With Masonry your markup will work just fine.

You can try a CSS grid solution like this..
.container.page {
-moz-column-width: 39em;
-webkit-column-width: 39em;
-moz-column-gap: .75em;
-webkit-column-gap: .75em;
}
.col-sm-6 {
display: inline-block;
margin: 0.75rem;
padding: .5rem;
width: 100%;
float:none;
}
Demo: http://bootply.com/108441
Or, you can accomplish this with a jquery plugin like masonry or isotope: http://bootply.com/99910

Text flows out of divs when scaling to mobile

The layout I made needs to be visible on mobile screens. Currently when I scale down to mobile or view the site on my iPhone 5 the divs with longer text in them just go all over the place.
Since I wrap everything in divs that I call section0, section1 etc etc, I thought setting the height for these would help, but this doesn't help. The background changes but the text that overflows just stays where it is. In the sections are page containers but setting height to these doesn't help either.
I'm a bit clueless here as this problem only happens with the bottom 3 divs.
My sections are built up like this;
<div class="section" id="section3">
<div class="row">
<div class="col-lg-6 werkwijze">
<h1>Lorem Psum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
<h1>Lorem Psum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
</div>
</div> <!-- end col -->
</div> <!-- end row -->
<div class="row">
<div class="col-lg-5 botlogo">
<div class="left"><img src="css/images/logo4.png"></div><div class="right"><h3>LOREM IPSUM</h3><h4>dolor sit amet</h4></div>
</div><!-- end col -->
</div> <!-- end row -->
</div> <!-- end sec -->
And I use these styles for the sections;
.page_container {
height:100% !important;
display:block;
}
#section3{
background: none;
border-bottom: 2px solid #8f8f8f;
height:100%;
}
There are 6 sections (0-5) and it starts to go wrong at section 3.
I tried to add a fiddle but for some reason I can't recreate the problem and I can not share the original website. http://jsfiddle.net/MgcDU/ I hope someone recognises this problem and can help me.

Based on the code snippet that you posted, you have an extra </div> in there that might be causing your problem (I put an arrow to it below):
<div class="section" id="section3">
<div class="row">
<div class="col-lg-6 werkwijze">
<h1>Lorem Psum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
<h1>Lorem Psum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
</div> <------------------------- This one seems like an extra
</div> <!-- end col -->
</div> <!-- end row -->
<div class="row">
<div class="col-lg-5 botlogo">
<div class="left"><img src="css/images/logo4.png"></div><div class="right"><h3>LOREM IPSUM</h3><h4>dolor sit amet</h4></div>
</div><!-- end col -->
</div> <!-- end row -->
</div> <!-- end sec -->