3 columns in the same level

Question

HTML:

<section class="info">
  <div class="container">
    <div class="info__title">
      <h2> Some main title </h2>
    </div>
    <div class="info__widgets">
      <div class="widget">
        <span class="widget__title"> TITLE1 </span>
        <p>
          NORMAL TEXT ABOUT SOMETHING HEHEHE.
        </p>
      </div>
      <div class="widget">
        <span class="widget__title"> TITLE 2 </span>
        <p>
          BIGGER TEXT BUT STILL NORMAL BLA BLA HEHE LOREM IPSUM
        </p>
      </div>
      <div class="widget">
        <span class="widget__title"> TITLE 3 </span>
        <p>
          SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT 
        </p>
      </div>
    </div>
  </div>
</section>

CSS:

.info {
  position: relative;
  background: #fafafa;
}
.info__title {
  text-align: center;
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}
.info__title h2 {
  font-family: Oswald, Helvetica, sans-serif;
  font-size: 1.5rem;
  color: #999;
  font-weight: 300;
}
.info__widgets {
  margin-top: 2.25rem;
  width: 100%;
  text-align: center;
}
.widget {
  display: inline-block;
  width: 50%;
  margin-bottom: 2.25rem;
}
@media only screen and (min-width: 620px) {
  .widget {
    width: 30%;
    display: inline-block;
  }
}
@media only screen and (min-width: 1360px) {
  .widget {
    width: 15%;
    display: inline-block;
  }
}
.widget * {
  display: block;
  width: 100%;
  text-align: center;
}
.widget i:before {
  font-size: 1.875rem;
  color: #ccc;
}
.widget .i-alcohol-shop {
  -webkit-transform: scale(1.35);
  -moz-transform: scale(1.35);
  -ms-transform: scale(1.35);
  -o-transform: scale(1.35);
  transform: scale(1.35);
}
.widget__number {
  margin-top: 1.5rem;
  font-family: Oswald, Helvetica, sans-serif;
  font-size: 2.125rem;
  color: #E97228;
  font-weight: 400;
  display: block;
}
.widget__title {
  margin-top: 1rem;
  margin-bottom: 2rem;
  font-family: Oswald, Helvetica, sans-serif;
  font-size: 1.25rem;
}

https://jsfiddle.net/3ueoxc4k/1/embedded/result/

I don't know exactly why this 'stairs' effect, i want be able to leave the three in the same level, but i don't know exactly why the stairs effect are occurring.

Any help is very welcome.

Give float:left or right to all .widget blocks :) – Davit Feb 25 '15 at 14:23 — Davit, Feb 25 '15 at 14:23

score 1 · Accepted Answer · answered Feb 25 '15 at 14:20

1

Add

vertical-align: top;

To .widget{}

answered Feb 25 '15 at 14:20

Patrick Aleman

612
6
19

could you explain why the stairs effect occurred in the first place? – Feb 25 '15 at 14:26
http://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward – Patrick Aleman Feb 25 '15 at 14:26

score 0 · Answer 2 · answered Feb 25 '15 at 14:21

0

Just change the

.widget {
    width: 15%;
    float: left;
  }

You are using display: inline-block; which creating a block as per the content of the div.

answered Feb 25 '15 at 14:21

DeepakJ

378
4
14

One should not use float's lightly. There are many alternatives that are better. If you don't float, you don't have to clear ;) – Patrick Aleman Feb 25 '15 at 14:24

3 columns in the same level

2 Answers2