Issue in css align column count - html

Question

Here is my jsfiddle link: http://jsfiddle.net/m9tk4uex/
The first column is not looking properly, it is something margin-down.
<div class="wrapper">
<h1 class="collection-title">3 Easy Liquid Rubber Solutions For Your Customers</h1>
<div class="main">
<div class="column-1">
<h3>Leaky Barn Roofs</h3>
<img src="leaky-barn-roofs.jpg" alt="" />
<p>Liquid Rubber MetalSafe ...</p>
<img src="img1.jpg" alt="" />
</div>
<div class="column-2">
<h3>Waterproof Planter</h3>
<img src="waterproof-planter.jpg" alt="" />
<p>Simple and easy to do...</p>
<img src="img2.jpg" alt="" />
</div>
<div class="column">
<h3>RV Roof Repair Boxes</h3>
<img src="rv-roof-repair-boxes.jpg" alt="" />
<p>You may be surprised...</p>
<img src="img3.jpg" alt="" />
</div>
</div>
</div>
I need something like this http://s23.postimg.org/xghd34xbf/Untitled_1_copy.png
May i know how to fix this? and how to add border right to each column?
Thanks.

Answer 1

One solution is to add display: inline-block to all div inside div with class .main:
div.main > div {
display: inline-block;
}
Additional you can add min-height to p elements to align properly:
div.main div[class^=column] p {
min-height: 170px;
}
body {
background-color: #222222;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
}
.wrapper {
width: 960px;
margin-left: auto;
}
#header {
position: relative;
letter-spacing: 1px;
height: 148px;
padding-top: 19px;
padding-bottom: 0px;
background: url("//cdn.shopify.com/s/files/1/0334/3241/t/3/assets/header-bg.png?7423127476356136057") no-repeat scroll 0% 0% transparent;
}
#cart-login {
float: right;
}
.cart-elem {
display: block;
font-size: 24px;
color: #fff;
margin: 0px;
position: relative;
top: 5px;
}
.main {
-webkit-column-count: 3;
/* Chrome, Safari, Opera */
-moz-column-count: 3;
/* Firefox */
column-count: 3;
}
.collection-title {
color: #C5C5C5;
font-size: 28px;
line-height: 28px;
margin: 15px 0px 16px;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
padding-bottom: 20px;
}
div.main > div {
display: inline-block;
}
div.main div[class^=column] p {
min-height: 170px;
}
<div class="wrapper">
<h1 class="collection-title">3 Easy Liquid Rubber Solutions For Your Customers</h1>
<div class="main">
<div class="column-1">
<h3>Leaky Barn Roofs</h3>
<img src="http://s2.postimg.org/4zex34qw5/leaky_barn_roofs.jpg" alt="" />
<p>Liquid Rubber MetalSafe Sealants provide corrosion protection, waterproofing and color restoration to aged rusting steel barn roofs, outlastingtypical barn roof paints for years. Our self priming coatings require only a washed surface without the
removal of any rust and can be applied with a brush, roller or paint sprayer. Standard & custom color top-coats are available.</p>
<img src="http://s17.postimg.org/3uwizx25r/img1.jpg" alt="" />
</div>
<div class="column-2">
<h3>Waterproof Planter</h3>
<img src="http://s2.postimg.org/4zex34qw5/leaky_barn_roofs.jpg" alt="" />
<p>Simple and easy to do. Waterproof and preserve your wood planter boxes. Untreated wood planter boxes start to decay from the harmful effects of water and ultraviolet light. Two thick coats of Liquid Rubber Waterproof Sealant will provide long lasting
and full protection that will secure your planter boxes for years to come.</p>
<img src="http://s17.postimg.org/3uwizx25r/img1.jpg" alt="" />
</div>
<div class="column">
<h3>RV Roof Repair Boxes</h3>
<img src="http://s2.postimg.org/4zex34qw5/leaky_barn_roofs.jpg" alt="" />
<p>You may be surprised at how inexpensive and simple it can be to repair an RV, motor home or camper yourself. Using a combination of Liquid Rubber Smooth Sealant and Liquid Rubber Seam Tape, any do-it-yourself customer can seal a leaky roof, whether
it's made of EPDM, TPO, fiberglass or aluminum.</p>
<img src="http://s17.postimg.org/3uwizx25r/img1.jpg" alt="" />
</div>
</div>
</div>

Answer 2

.main div h3:nth-child(1){margin-top: 0;}

Answer 3

Please update this code
body {
background-color:#222222;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
color:#fff;
}
.wrapper {
width:960px;
margin-left:auto;
}
#header {
position: relative;
letter-spacing: 1px;
height: 148px;
padding-bottom: 0px;
background: url("//cdn.shopify.com/s/files/1/0334/3241/t/3/assets/header-bg.png?7423127476356136057") no-repeat scroll 0% 0% transparent;
}
#cart-login {
float: right;
}
.cart-elem {
display: block;
font-size: 24px;
color: #fff;
margin: 0px;
position: relative;
top: 5px;
}
.main {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-rule: 4px outset #ff00ff; /* Chrome, Safari, Opera */
-moz-column-rule: 4px outset #ff00ff; /* Firefox */
column-rule: 4px outset #ff00ff;
}
.collection-title {
color: #C5C5C5;
font-size: 28px;
line-height: 28px;
margin: 15px 0px 16px;
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 400;
padding-bottom: 20px;
}
h3{margin: 0 0 10px;}
<div class="wrapper">
<h1 class="collection-title">3 Easy Liquid Rubber Solutions For Your Customers</h1>
<div class="main">
<div class="column-1">
<h3>Leaky Barn Roofs</h3>
<img src="http://s2.postimg.org/4zex34qw5/leaky_barn_roofs.jpg" alt="" />
<p>Liquid Rubber MetalSafe Sealants provide corrosion protection, waterproofing and color restoration to aged rusting steel barn roofs, outlastingtypical barn roof paints for years. Our self priming coatings require only a washed surface without the removal of any rust and can be applied with a brush, roller or paint sprayer. Standard & custom color top-coats are available.</p>
<img src="http://s17.postimg.org/3uwizx25r/img1.jpg" alt="" />
</div>
<div class="column-2">
<h3>Waterproof Planter</h3>
<img src="http://s2.postimg.org/4zex34qw5/leaky_barn_roofs.jpg" alt="" />
<p>Simple and easy to do. Waterproof and preserve your wood planter boxes. Untreated wood planter boxes start to decay from the harmful effects of water and ultraviolet light. Two thick coats of Liquid Rubber Waterproof Sealant will provide long lasting and full protection that will secure your planter boxes for years to come.</p>
<img src="http://s17.postimg.org/3uwizx25r/img1.jpg" alt="" />
</div>
<div class="column">
<h3>RV Roof Repair Boxes</h3>
<img src="http://s2.postimg.org/4zex34qw5/leaky_barn_roofs.jpg" alt="" />
<p>You may be surprised at how inexpensive and simple it can be to repair an RV, motor home or camper yourself. Using a combination of Liquid Rubber Smooth Sealant and Liquid Rubber Seam Tape, any do-it-yourself customer can seal a leaky roof, whether it's made of EPDM, TPO, fiberglass or aluminum.</p>
<img src="http://s17.postimg.org/3uwizx25r/img1.jpg" alt="" />
</div>
</div>
</div>

Answer 4

.column-1,.column-2,column{
-webkit-column-break-inside: auto;
}