Search code examples
cssgutter

CSS Gutter overflowing body

In my homemade CSS grid i have a problem. If my .row edges touches the body edge, it will generate overflow. See demo here: http://jsfiddle.net/57BGe/3/ UPDATED FOR EXPLANATION

.row {
  margin: 0 -15px;
}

How could i prevent the overflow? (overflow: none, won't work since you still can scroll on phone and with some force on desktop)

* UPDATE * If you look at Bootstrap #http://getbootstrap.com/css/ Try using dev console and change the margin-left of .row to something that would make overflow on body. (e.g. -150px)
If i do this, i still cant scroll horisontal.

Solution

  • Found a solution.
    I tried to put overflow: hidden on body and html, but i could still scroll.
    So i made a container with overflow: hidden, and wrapped everything inside it.

    That made it work just fine. Abit of a dirty workaround, but it had to be done.