CODEWITHSUNDEEP
htmlcss
selva
selva

Reputation: 71

Issue in css align column count

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.

Upvotes: 1

Views: 85

Answers (4)

vinay choudhary
vinay choudhary

Reputation: 184

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

Upvotes: 1

Abhinav Srivastav
Abhinav Srivastav

Reputation: 1

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

Upvotes: 0

Alex Char
Alex Char

Reputation: 33218

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>

Upvotes: 3

Ram kumar
Ram kumar

Reputation: 3162

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>

Upvotes: 0

Related Questions