Creating padding in grids and still equal heights

Question

I've created a grid banner where I'm trying to implement a padding between the columns.

However, when I do this it seem to mess up the heights. How can I do this without messing up heights?

As you can see if you add following code in a html doc, the item normal-size will be bigger than the double-size column. I've applied padding on column-small-1, column-small-2, normal-size and double-size, but as you can see it does not seem to align properly?

.wrapper {
  width: 100%;
  height: auto;
}
.item {
  float: left;
}
.double-size {
  box-sizing: border-box;
  width: 66.6666%;
  height: auto;
  padding-right: 8px;
}
.normal-size {
  box-sizing: border-box;
  width: 33.3333%;
  height: auto;
  padding-left: 8px;
}
.double-size .column-big {
  box-sizing: border-box;
  width: 100%;
  height: auto;
}
.normal-size .column-small-1 {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 0px 0px 8px 0px;
}
.normal-size .column-small-2 {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 8px 0px 0px 0px;
}
.column-content {
  position: relative;
  overflow: hidden;
}
.column-content .meta-info-doub {
  box-sizing: border-box;
  position: absolute;
  height: auto;
  width: 100%;
  bottom: 0;
  right: 0;
  padding: 40px;
}
.column-content .meta-info-norm {
  box-sizing: border-box;
  position: absolute;
  height: auto;
  width: 100%;
  bottom: 0;
  right: 0;
  padding: 20px;
}
.title-double {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  line-height: 1.65;
  background: #161616;
  background: rgba(22, 22, 22, 0.5);
  color: #fff;
  display: inline;
  padding: 4px 0;
  margin: 0;
  -webkit-box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
  box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
  text-transform: uppercase;
}
.title-normal {
  font-family: 'Open Sans', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  background: #161616;
  background: rgba(22, 22, 22, 0.5);
  color: #fff;
  display: inline;
  padding: 4px 0;
  margin: 0;
  -webkit-box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
  box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
  text-transform: uppercase;
}
.date-double {
  font-family: 'Open Sans', sans-serif;
  display: inline;
  color: #fff;
  font-size: 11px;
  text-shadow: 0 1px 0 #222;
  text-transform: uppercase;
  margin-bottom: 11px;
  display: block;
}
.date-normal {
  font-family: 'Open Sans', sans-serif;
  display: inline;
  color: #fff;
  font-size: 11px;
  text-shadow: 0 1px 0 #222;
  text-transform: uppercase;
  margin-bottom: 11px;
  display: block;
}
.column-content .content-image {
  height: auto;
  width: 100%;
  background-size: 100%;
  display: block;
  -moz-transition: all .5s;
  -webkit-transition: all .5s;
  transition: all .5s;
}
.column-content .content-image:hover {
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

<div class="wrapper">
  <div class="item double-size">
    <div class="column-big">
      <div class="column-content">
        <img src="http://blognewswp.gotheme.net/wp-content/uploads/2014/08/shutterstock_190029455_supersize-640x400.jpg" href="#" id="img-zoom" class="content-image">
        <div class="meta-info-doub">
          <h3 class="date-double">23. Oktober 2015</h3>
          <h3 class="title-double">Post2</h3>
        </div>
      </div>
    </div>
  </div>
  <div class="item normal-size">
    <div class="column-small-1">
      <div class="column-content">
        <img src="http://blognewswp.gotheme.net/wp-content/uploads/2014/08/shutterstock_190029455_supersize-640x400.jpg" href="#" id="img-zoom" class="content-image">
        <div class="meta-info-norm">
          <h3 class="date-double">23. Oktober 2015</h3>
          <div class="info-title">
            <h3 class="title-normal">Post 3</h3>
          </div>
        </div>
      </div>
    </div>
    <div class="column-small-2">
      <div class="column-content">
        <img src="http://blognewswp.gotheme.net/wp-content/uploads/2014/08/shutterstock_190029455_supersize-640x400.jpg" href="#" id="img-zoom" class="content-image">
        <div class="meta-info-norm">
          <h3 class="date-double">23. Oktober 2015</h3>
          <div class="info-title">
            <h3 class="title-normal">Post1</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

score 0 · Accepted Answer · edited May 23 '17 at 11:50

Can you fix the height of the row? If not, the best I can think of is having your two .item vertically align correctly. Which I would do by adding:

.item {
    display:inline-block;
    vertical-align:middle;
}

And removing the float:left that was previously on .item. This will also require you remove the whitespace between the closing and opening tags of two .items or apply one of the other techniques for inline-block gaps mentioned "How to remove the space between inline-block elements?".

Edit: There is probably a flexbox based solution if you can restrict your support to quite modern browsers.

Edit: http://jsfiddle.net/a2q3rr30/ is the flexbox solution linked below. It uses a combination of flex, a position absolute trick for container sizing and css object-fit to produce the effect. I've used the technique before and it works well across IE, FF and modern WebKit implementations though some of those might require some vendor specific prefixes to be added.

if i fix the height of the row it wont resize for responsive reasons? i am open for solution which restrict my support to modern browsers — Peter Pik, Jan 19 '15 at 03:48
Check my example here: http://jsfiddle.net/a2q3rr30/ I've used flex box in addition to a position:absolute technique required to take advantage of the equal height container provided by the flexbox, a simple height:100% doesn't work due to some technical reasons about how height calculations are currently defined. I'm obsessive about getting things to line up and I'm glad I could share the technique :) — stealthwang, Jan 19 '15 at 04:15

Creating padding in grids and still equal heights

1 Answers1