0

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!

dippas
  • 52,735
  • 15
  • 110
  • 120
Miguel Stevens
  • 7,579
  • 15
  • 60
  • 112
  • I could use some CSS with that. Not only HMTL – Gust van de Wal Nov 21 '14 at 12:53
  • 33.33% is being rounded off! – Salman A Nov 21 '14 at 13:01
  • 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

1 Answers1

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>
Salman A
  • 248,760
  • 80
  • 417
  • 510