Div spacing offset using calc()

Question

I have 3 vertical rows which are divided on my screen using calc() I'm using JS to set the height for each box type

width: calc(1/3 * 100%);

This is the javascript to set the height of each block, It's setting the height equal to the width and in the case of a long box it's setting the height to half the width.

$('.box1').height( $('.box1').width() );
$('.box2').height( $('.box2').width() / 2 );
$('.box4').height( $('.box4').width() );

I have a weird offset between the columns in the row ( see screenshot )

You can view the page here http://cloudlabme.webhosting.be/4sr enter image description here

This is the HTML of the two vertical rows

<div class="container">
    <div class="row">
        <div class="box box4 box-event" style="background-image: url(build/img/events/2.jpg)"><h1>II</h1></div>
        <div class="box box2 box-medium"></div>
    </div>

    <div class="row">
        <div class="box box2 box-light"></div>
        <div class="box box1 box-dark"><h3>Hier</h3></div>
        <div class="box box1 box-medium"></div>
        <div class="box box2"></div>
    </div>
</div>

This is my CSS

.container {
    position: relative;
    width: 100%;
    max-width: $breakpoint;
    margin: 0 auto;
    z-index: 0;
}

.row {
    float: left;
    width: calc(1/3 * 100%);
    background: #f2f2f2;
}

/* BOX */
.box {
    &.box-light {background: #fff;}
    &.box-medium {background: #666;}
    &.box-dark {background: #111;}
}

.box1 {
    float: left;
    width:50%;
    background: #ff4444;
}

.box2 {
    clear: left;
    width: 100%;
    background: #ff6666;
}

.box4 {
    clear: left;
    width: 100%;
    background: #ff8888;
}

Thanks! This is killing my brain!

That might be true! So that's why the big block is higher then the one on the left? any idea what a possible solution might be? — Miguel Stevens, Nov 21 '14 at 13:04
Use `Math.round($('.box1').width())` and see if the result is satisfying with `int` values for height. Although there are css techniques for that kind of problem but they do have some flaws , too it depends. search for square with css or something — kidwon, Nov 21 '14 at 13:08

Salman A · Answer 1 · 2014-11-21T13:52:14.257

1

Most probably, the one pixel gap is caused by rounding off error. The only solution I could think of is to force the container width to be a multiple of 3 using JavaScript.

A better solution is to use CSS table display. Set 33.33333333% width on the first two "cells" and let the third one autosize itself. The heights will still be off by one or two pixel but this is better than using calc() and fighting with rounding issues.

$(window).on("load resize", function() {
  $('.box1').height($('.box1').width());
  $('.box2').height($('.box2').width() / 2);
  $('.box4').height($('.box4').width());
});

.container {
  display: table;
  width: 100%;
}
.row {
  display: table-cell;
  vertical-align: top;
  background: #CCC;
}
.row:first-child, .row:first-child + .row {
  width: 33.33333333%;
}
.box1 {
  float: left;
  width: 50%;
  background: #C99;
}
.box2 {
  clear: left;
  background: #C66;
}
.box4 {
  clear: left;
  background: #C33;
}
h1, h3 {
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
    <div class="box box4">
      <h1>II</h1>
    </div>
    <div class="box box2"></div>
  </div>
  <div class="row">
    <div class="box box2"></div>
    <div class="box box1">
      <h3>Hier</h3>
    </div>
    <div class="box box1"></div>
    <div class="box box2"></div>
  </div>
  <div class="row">
    <div class="box box2"></div>
    <div class="box box4"></div>
  </div>
</div>

edited Nov 21 '14 at 13:52

answered Nov 21 '14 at 13:11

Salman A

262,204
82
430
521

Really clever! I just have a 1pixel problem now! Screenshot: http://prntscr.com/58l7f8 Thank you! – Miguel Stevens Nov 21 '14 at 13:15
I will try your second solution, Any knowsn codepens or tutorials on how to achieve this? Thanks! – Miguel Stevens Nov 21 '14 at 13:20
I created a mockup by editing CSS using chrome devtools. Unfortunately, I cannot get _grab_ the edited CSS. I'll try to add a snippet to answer. – Salman A Nov 21 '14 at 13:22
See revised answer. Note that you can ditch JavaScript and set 50% height using "css padding top hack" (google). – Salman A Nov 21 '14 at 13:48
Thank you very much! Taking a look at it now, So with that hack i can ditch all the js for setting the height? – Miguel Stevens Nov 21 '14 at 13:51
Yes, but you will need to add one extra inside each box (the technique requires absolute+relative positioning) (http://stackoverflow.com/q/22673008/87015). – Salman A Nov 21 '14 at 13:53
Thanks again! The results are still a bit off? I can't seem to find what the issue is. http://cloudlabme.webhosting.be/4sr – Miguel Stevens Nov 21 '14 at 13:55
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/65380/discussion-between-salman-a-and-notflip). – Salman A Nov 21 '14 at 14:01

Div spacing offset using calc()

1 Answers1