Border out DIV (borde fuera de div) - html

I have problems in CSS with the property Padding or Border. I have an image within a div that fits perfect, but to add margin exceeds the div that contains it.
<div class="content">
<div class="row" />
<div class="ima">
<h1>Titulo 1</h1>
<img class="img" src="https://sites.google.com/site/cnetuc/imagen-04.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas laoreet mattis arcu eget euismod. Donec eget purus et enim cursus feugiat sit amet in diam.
<p>
</div>
<div class="ima">
<h1>Titulo 1</h1>
<img class="img" src="https://sites.google.com/site/cnetuc/imagen-04.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas laoreet mattis arcu eget euismod. Donec eget purus et enim cursus feugiat sit amet in diam.
<p>
</div>
<div class="ima">
<h1>Titulo 1</h1>
<img class="img" src="https://sites.google.com/site/cnetuc/imagen-04.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas laoreet mattis arcu eget euismod. Donec eget purus et enim cursus feugiat sit amet in diam.
<p>
</div>
</div>
</div>
Attached fiddle


Add box-sizing: border-box; to the image.
.ima img{
width:100%;
border:10px solid rgba(0, 0, 0, 0.3);
box-sizing: border-box;
}


Try to
box-sizing: border-box;
Or
width: calc(100% - 20px);

Related

responsive columns all same height with heading, paragraph, button all same height

I'm struggling to achieve responsive column. Currently all columns are not the same height. When the screen gets smaller, the paragraphs are not the same level, I am trying to make them the same level no matter what screen size. My next problem is the button will also not be the same level in all columns.
Bellow is currently my HTML:
<div class="container">
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
<h2>test heading text</h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
Learn more
</div>
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" /> <h2>Fencing and Gates</h2>
<h2>test heading text long</h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. Maecenas id leo at elit vestibulum sagittis at in ex. Cras vulputate laoreet dictum. Vestibulum nec quam placerat, blandit orci in, hendrerit ante. </p>
Learn more
</div>
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
<h2>test heading text longer </h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. </p>
Learn more
</div>
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
<h2>test heading text longer longer </h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. </p>
Learn more
</div>
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
<h2>test heading text</h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. </p>
Learn more
</div>
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
<h2>Block Paved Driveways and Paths</h2>
<h2>test heading text</h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. Maecenas id leo at elit vestibulum sagittis at in ex. Cras vulputate laoreet dictum. Vestibulum nec quam placerat, blandit orci in, hendrerit ante. </p>
Learn more
</div>
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
<h2>test heading text</h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. </p>
Learn more
</div>
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
<h2>test heading text</h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. </p>
Learn more
</div>
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
<h2>test heading text</h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. </p>
Learn more
</div>
</div>
Below is my CSS:
.container:after { /*clear float*/
content: "";
display: table;
width: 100%;
clear: both;
}
.container {
margin-left: 100px;
margin-right: 100px;
text-align: center;
padding-top: 30px;
}
.section {
float: left;
width: 33.3333%;
padding-bottom: 50px;
border: 1px solid;
box-sizing: border-box;
display: table-cell;
}
.section p {
padding-bottom: 50px;
text-align: center;
font-family: "Montserrat", sans-serif;
font-size: 19px;
padding-left: 25px;
padding-right: 25px;
}
.section h2 {
text-align: center;
font-family: "Slabo 27px", serif;
font-size: 24px;
font-weight: 700;
text-align: center;
padding-left: 25px;
padding-right: 25px;
}
#media (max-width: 768px) {
.section {
float: none;
width: auto;
}
}
below is a js fiddle of what I currently have
https://jsfiddle.net/b147rmdh/
Any help on this would be greatly appreciated!

You need to specify a height for each column for them to all be the same height. If you don't then the columns will size themselves based on the amount of content they contain (which is currently what is happening in your code). More specifically relating to your code, if you add a specific height to your .section class, then all the columns should be the same height.
Once you have done this, you could use absolute positioning on all of the elements within the columns (the headers, paragraphs, buttons, etc) so that they all line up. If you aren't very familiar with absolute positioning and the position property in general, here is a great reference that explains positioning well. Definitely recommend giving it a read and taking the time to get a good understanding of positioning since it's one of the most fundamental CSS skills.

I'd suggest a Flexbox with wrapping.
.container {
display: flex;
flex-wrap: wrap;
}
.section {
width: 33.3333%;
}
Once you've done that, you can use a similar method vertically if you wrap the upper content in one element and keep the button separate. Set your flex-direction to column and justify-content to space-between.

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

footer background wont work

I was trying to make a simple website for school, but my footer background gets too big.
Here's my HTML
<div class="container-fluid">
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Portofolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<div class="footer">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. </p>
</div>
</div>
and Here is my CSS if anybody has any idea on how to fix it please tell me
i have tried to change sometihngs but my background keeps showing at the top
background-color:#d2d8e0;
}
nav {
background-color: #64f48a;
float: center;
padding: 20px 0px 0px 350px;
}
nav ul li {
padding: 0px 50px 20px 0px;
display: inline-block;
}
nav ul li a {
color: #f0f0f0;
}
nav ul li:hover {
background-color: black;
}
article {
padding: 0px 0px 0px 50px;
}
article img {
padding: 0px 0px 0px 50px;
}
article h1 {
text-align: center;
font-size: 20px;
padding: 0px 0px 0px 0px;
}
article p {
text-align: center;
font-size: 15px;
}
.footer {
background-color: red;
}
.footer p {
text-align: center;
color: #fff;
}

This is an issue with the float applied to bootstrap columns, you should wrap your columns with a row (See Grid System).
You could also add a display property to your footer like so or add a column to enclose your footer: <div class="col-md-12">.
.footer {
background-color: red;
display: inline-block;
width: 100%;
}
Working Example with add .row div.
nav {
background-color: #64f48a;
float: center;
padding: 20px 0px 0px 350px;
}
nav ul li {
padding: 0px 50px 20px 0px;
display: inline-block;
}
nav ul li a {
color: #f0f0f0;
}
nav ul li:hover {
background-color: black;
}
article {
padding: 0px 0px 0px 50px;
}
article img {
padding: 0px 0px 0px 50px;
}
article h1 {
text-align: center;
font-size: 20px;
padding: 0px 0px 0px 0px;
}
article p {
text-align: center;
font-size: 15px;
}
.footer {
background-color: red;
}
.footer p {
text-align: center;
color: #fff;
padding: 50px 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<nav>
<ul>
<li>Home
</li>
<li>Services
</li>
<li>Portofolio
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
</nav>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
</div>
<div class="footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.</p>
</div>
</div>

If you're planning to put a sticky footer at the bottom, you'll need need to add a bottom padding to the body so that it pushes the footer down. You'll also need to make sure you actually set a height on the footer.
If you want to learn more about how to do this, check out this post:
https://css-tricks.com/snippets/css/sticky-footer/

Remove the padding-bottom: 200px; from the .footer p

CSS - Minus top value how to get rid of the gap below it

The three 'Spares Solutions' columns are in a container called relative. I have given it the properties below:
.relative {
top: -10rem;
position: relative;
}
I know that this is expected behaviour which is what you see in the screenshot.
You can also see that there is content below the three columns. This is where I get my problem.
I would like to know if there is a way to give something a minus value and get rid of the space where it expects to see the three columns.
one solution would be to give the content a minus 10 value. But I would like to avoid this due to the space then being under the content.
This is my current HTML:
<div class="relative home-top-minus">
<div class="row three-column-margin">
<div class="column small-12 medium-4">
<div class="panel-orange text-center column-padding">
<img src="http://placehold.it/200x150" alt="" />
<h3 class="heading-tan heading-padding-small">SPARES SOLUTIONS</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ultrices lorem, eget malesuada nulla. Pellentesque vel mattis nunc. Fusce quis ultricies quam,
ut molestie ex. Nulla facilisi. Praesent id magna consequat, pulvinar ligula sit amet, maximus tellus.
</p>
<a href="#"
class="button large">LEARN MORE</a>
</div>
</div>
<div class="column small-12 medium-4">
<div class="panel-light-orange text-center column-padding">
<img src="http://placehold.it/200x150" alt="" />
<h3 class="heading-brown heading-padding-small">SPARES SOLUTIONS</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ultrices lorem, eget malesuada nulla. Pellentesque vel mattis nunc. Fusce quis ultricies quam,
ut molestie ex. Nulla facilisi. Praesent id magna consequat, pulvinar ligula sit amet, maximus tellus.
</p>
<a href="#"
class="button large">LEARN MORE</a>
</div>
</div>
<div class="column small-12 medium-4">
<div class="panel-brown text-center column-padding">
<img src="http://placehold.it/200x150" alt="" />
<h3 class="heading-light-orange heading-padding-small">SPARES SOLUTIONS</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ultrices lorem, eget malesuada nulla. Pellentesque vel mattis nunc. Fusce quis ultricies quam,
ut molestie ex. Nulla facilisi. Praesent id magna consequat, pulvinar ligula sit amet, maximus tellus.
</p>
<a href="#"
class="button large">LEARN MORE</a>
</div>
</div>
</div>
<div class="row">
<div class="column small-12 medium-4">
<div class="bubble">
<p>
“Click Spares have saved us
thousands since we joined!!!”,
really great service and they
know exactly how to deal with
tricky customers”
</p>
<p class="heading-light-orange">
Product Retail Manager
</p>
</div>
</div>
<div class="column small-12 medium-8">
<h2 class="h1 heading-light-orange">WHY CLICK SPARES</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ultrices lorem, eget malesuada nulla. Pellentesque vel mattis nunc. Fusce quis ultricies quam,
ut molestie ex. Nulla facilisi. Praesent id magna consequat, pulvinar ligula sit amet, maximus tellus.
</p>
<a href="#"
class="button large alt">LEARN MORE</a>
</div>
</div>
</div>

use margin-top:-10rem instead of top:-10rem and use z-index:999 or something bigger than the div on the top ( the div before .relative ) has ( in this example top has z-index:2 ) . if it doesn't have a z-index give one manually
.top{z-index:2} , .relative{z-index:3}
let me know if it works ( in the snippet example it works )
.relative {
margin-top: -10rem;
position: relative;
z-index:999;
}
.top {
height:200px;
background:blue;
position:relative;
z-index:2;
}
.bottom {
height:200px;
background:blue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/latest/journal/bootstrap.min.css" rel="stylesheet"/>
<div class="top">
</div>
<div class="relative home-top-minus">
<div class="row three-column-margin">
<div class="column small-12 medium-4">
<div class="panel-orange text-center column-padding">
<img src="http://placehold.it/200x150" alt="" />
<h3 class="heading-tan heading-padding-small">SPARES SOLUTIONS</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ultrices lorem, eget malesuada nulla. Pellentesque vel mattis nunc. Fusce quis ultricies quam,
ut molestie ex. Nulla facilisi. Praesent id magna consequat, pulvinar ligula sit amet, maximus tellus.
</p>
<a href="#"
class="button large">LEARN MORE</a>
</div>
</div>
<div class="column small-12 medium-4">
<div class="panel-light-orange text-center column-padding">
<img src="http://placehold.it/200x150" alt="" />
<h3 class="heading-brown heading-padding-small">SPARES SOLUTIONS</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ultrices lorem, eget malesuada nulla. Pellentesque vel mattis nunc. Fusce quis ultricies quam,
ut molestie ex. Nulla facilisi. Praesent id magna consequat, pulvinar ligula sit amet, maximus tellus.
</p>
<a href="#"
class="button large">LEARN MORE</a>
</div>
</div>
<div class="column small-12 medium-4">
<div class="panel-brown text-center column-padding">
<img src="http://placehold.it/200x150" alt="" />
<h3 class="heading-light-orange heading-padding-small">SPARES SOLUTIONS</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ultrices lorem, eget malesuada nulla. Pellentesque vel mattis nunc. Fusce quis ultricies quam,
ut molestie ex. Nulla facilisi. Praesent id magna consequat, pulvinar ligula sit amet, maximus tellus.
</p>
<a href="#"
class="button large">LEARN MORE</a>
</div>
</div>
</div>
<div class="row">
<div class="column small-12 medium-4">
<div class="bubble">
<p>
“Click Spares have saved us
thousands since we joined!!!”,
really great service and they
know exactly how to deal with
tricky customers”
</p>
<p class="heading-light-orange">
Product Retail Manager
</p>
</div>
</div>
<div class="column small-12 medium-8">
<h2 class="h1 heading-light-orange">WHY CLICK SPARES</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ultrices lorem, eget malesuada nulla. Pellentesque vel mattis nunc. Fusce quis ultricies quam,
ut molestie ex. Nulla facilisi. Praesent id magna consequat, pulvinar ligula sit amet, maximus tellus.
</p>
<a href="#"
class="button large alt">LEARN MORE</a>
</div>
</div>
</div>
<div class="bottom">
</div>

Just use margin-top: -10rem; instead of top: -10rem;

Align the text on the right side of an image having float left in a container

I want to create a "card" for an element, it will have an image, a title, a sub-title and a description, what I want is that the card should be aligned to the left (attached to the left border) but when I float the text to the right I get this behavior.. And the position of the card depends on the max width I set the text. How can I fix this?
This is the JSFiddle to show the whole code:
This is the code I used to create the cards
<div class="first__section">
<div class="inner">
<div class="schede__container">
<div class="scheda__realizzazione">
<img class="scheda__img" src="http://placehold.it/150x150" alt="">
<div class="scheda__content">
<h1>test</h1>
<h2>test</h2>
<p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
</div>
</div>
<div class="scheda__realizzazione">
<img class="scheda__img" src="http://placehold.it/150x150" alt="">
<div class="scheda__content">
<h1>test</h1>
<h2>test</h2>
<p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
</div>
</div>
<div class="scheda__realizzazione">
<img class="scheda__img" src="http://placehold.it/150x150" alt="">
<div class="scheda__content">
<h1>test</h1>
<h2>test</h2>
<p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
</div>
</div>
<div class="scheda__realizzazione">
<img class="scheda__img" src="http://placehold.it/150x150" alt="">
<div class="scheda__content">
<h1>test</h1>
<h2>test</h2>
<p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
</div>
</div>
<div class="scheda__realizzazione">
<img class="scheda__img" src="http://placehold.it/150x150" alt="">
<div class="scheda__content">
<h1>test</h1>
<h2>test</h2>
<p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
</div>
</div>
<div class="scheda__realizzazione">
<img class="scheda__img" src="http://placehold.it/150x150" alt="">
<div class="scheda__content">
<h1>test</h1>
<h2>test</h2>
<p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
</div>
</div>
</div>
</div>
</div>

Try this
Html:
<div class="first__section">
<div class="inner">
<div class="schede__container">
<div class="scheda__realizzazione">
<div class="div-img">
<img class="scheda__img" src="http://placehold.it/150x150" alt="">
</div>
<div class="scheda__content">
<h1>test</h1>
<h2>test</h2>
<p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
</div>
</div>
<div class="scheda__realizzazione">
<img class="scheda__img" src="http://placehold.it/150x150" alt="">
<div class="scheda__content">
<h1>test</h1>
<h2>test</h2>
<p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
</div>
</div>
<div class="scheda__realizzazione">
<img class="scheda__img" src="http://placehold.it/150x150" alt="">
<div class="scheda__content">
<h1>test</h1>
<h2>test</h2>
<p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
</div>
</div>
<div class="scheda__realizzazione">
<img class="scheda__img" src="http://placehold.it/150x150" alt="">
<div class="scheda__content">
<h1>test</h1>
<h2>test</h2>
<p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
</div>
</div>
<div class="scheda__realizzazione">
<img class="scheda__img" src="http://placehold.it/150x150" alt="">
<div class="scheda__content">
<h1>test</h1>
<h2>test</h2>
<p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
</div>
</div>
<div class="scheda__realizzazione">
<img class="scheda__img" src="http://placehold.it/150x150" alt="">
<div class="scheda__content">
<h1>test</h1>
<h2>test</h2>
<p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
</div>
</div>
</div>
</div>
</div>
CSS:
.schede__container {
border-left:1px solid #343333;
}
.scheda__realizzazione {
text-align: left;
display:inline-block;
margin:40px 0 40px 20px;
padding:40px 0 40px 20px;
border-bottom:1px solid #343333;
}
.div-img {
float: left;
}
.scheda__content {
display: inline-block;
margin-left: 20px;
max-width: 313px;
vertical-align: top;
}
.scheda__content h1 {
color:#5C5A5B;
text-transform:uppercase;
font-size:20px;
}
.scheda__content h2 {
color:#5C5A5B;
font-size:20px;
margin-top: -6px;
}
.scheda__content p {
color:#5C5A5B;
text-transform: lowercase;
}
.first__section {
width:100%;
text-align:center;
background-color:white;
}
.inner {
max-width: 1024px;
margin: 0 auto;
position: relative;
}
demo http://jsfiddle.net/JentiDabhi/256oxh52/

You need to change some properties in the following CSS classes to achieve your target.
First of all put the image in separate div and content in separate div.
<div class="scheda__realizzazione">
<div class="div-img">
<img class="scheda__img" src="http://placehold.it/150x150" alt="">
</div>
<div class="scheda__content">
<h1>test</h1>
<h2>test</h2>
<p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
</div>
</div>
Add width to your .div_img class that your images needs.
.div-img {
float: left;
width: 150px;
}
Secondly you only need to set the margin-left in the .scheda__content class and remove all other styles in it. margin-left : 150px; will do the trick for you but I set it to margin-left: 160px; for some clarity.
.scheda__content {
margin-left: 160px;
}
Working JSFiddle Demo Here.
.schede__container {
border-left: 1px solid #343333;
}
.scheda__realizzazione {
text-align: left;
display: inline-block;
margin: 40px 0 40px 20px;
padding: 40px 0 40px 20px;
border-bottom: 1px solid #343333;
}
.div-img {
float: left;
width: 150px;
}
.scheda__content {
margin-left: 160px;
}
.scheda__content h1 {
color: #5C5A5B;
text-transform: uppercase;
font-size: 20px;
}
.scheda__content h2 {
color: #5C5A5B;
font-size: 20px;
margin-top: -6px;
}
.scheda__content p {
color: #5C5A5B;
text-transform: lowercase;
}
.first__section {
width: 100%;
text-align: center;
background-color: white;
}
.inner {
max-width: 1024px;
margin: 0 auto;
position: relative;
}
<div class="first__section">
<div class="inner">
<div class="schede__container">
<div class="scheda__realizzazione">
<div class="div-img">
<img class="scheda__img" src="http://placehold.it/150x150" alt="">
</div>
<div class="scheda__content">
<h1>test</h1>
<h2>test</h2>
<p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
</div>
</div>
<div class="scheda__realizzazione">
<div class="div-img">
<img class="scheda__img" src="http://placehold.it/150x150" alt="">
</div>
<div class="scheda__content">
<h1>test</h1>
<h2>test</h2>
<p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
</div>
</div><div class="scheda__realizzazione">
<div class="div-img">
<img class="scheda__img" src="http://placehold.it/150x150" alt="">
</div>
<div class="scheda__content">
<h1>test</h1>
<h2>test</h2>
<p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
</div>
</div><div class="scheda__realizzazione">
<div class="div-img">
<img class="scheda__img" src="http://placehold.it/150x150" alt="">
</div>
<div class="scheda__content">
<h1>test</h1>
<h2>test</h2>
<p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
</div>
</div><div class="scheda__realizzazione">
<div class="div-img">
<img class="scheda__img" src="http://placehold.it/150x150" alt="">
</div>
<div class="scheda__content">
<h1>test</h1>
<h2>test</h2>
<p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
</div>
</div><div class="scheda__realizzazione">
<div class="div-img">
<img class="scheda__img" src="http://placehold.it/150x150" alt="">
</div>
<div class="scheda__content">
<h1>test</h1>
<h2>test</h2>
<p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
</div>
</div>
</div>
</div>
</div>