1

I'm using pure css for my website. The problem is, that the boxes have a weird offset, that is definied nowhere The boxes don't move even when I set padding and margin to zero. This causes the last box to move in the second row.

HTML:

<div class="pure-u-4-24 outer">
<div class="inner-ib inner"></div>
</div>

<div class="pure-u-5-24 outer">
<div class="inner-ib inner"></div>
</div>

<div class="pure-u-11-24 outer">
<div class="inner-ib inner"></div>
</div>

<div class="pure-u-4-24 outer ">
<div class="inner-ib inner"></div>
</div>

CSS:

.inner {
  background-color: rgba(44, 62, 80, 0.75);
}
 .outer {
   padding-top: 10vh;
}
.inner-ib{
  height: 90vh;
}

How the website looks

Bitte Wenden
  • 100
  • 10
  • 2
    That won't help. We need the relevant source (HTML and CSS). Try to boil the website down to the minimum required to demonstrate the issue and put that in a snippet here in the question. (Edit the question; click the `<>` icon.) – Mr Lister Oct 08 '15 at 19:43
  • And, you can do [inline links](http://stackoverflow.com/questions/33024572/box-offset-when-using-the-pure-css-framework) like this: \[link name\]\(lLINK_URL\) – Reed Oct 08 '15 at 19:53

1 Answers1

0

Put everything inside the pure-g container for your columns to work correctly..

http://codeply.com/go/rVcX2Bhpko

<div class="pure-g"> 
      ..
</div>
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624