Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › 25% width columns have extra pixels?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • September 30, 2013 at 11:05 am #151717
    Rugg
    Participant

    I’ve created a basic 4 column grid, each with 25% width inside a 100% width wrapper. I’ve noticed the last column and row sometimes has an additional 2-5 pixels depending on the browser width.

    I remember someone here had a similar issue with a 3 column grid using 33.33% widths, but I couldn’t seem to locate the post.

    has anyone experienced a similar issue? Is there a fix?

    Sample: http://jsfiddle.net/tUXEE/show

    Thanks

    September 30, 2013 at 11:25 am #151718
    TheDoc
    Member

    They will definitely need to be different widths sometimes but you shouldn’t be seeing 2-5 pixels. I’m seeing just 1px being added to one or two of the boxes and not necessarily the last column or row.

    What browser are you seeing this in? I’m viewing in Chrome. Lots of browsers have different ways of handling the rounding.

    October 1, 2013 at 10:31 am #151815
    Designer42
    Participant

    @R

    First off your div.grid has padding of 5px; That is what is spacing at least 5px on the top, bottoms, left and right. Take that out or zero that out. That will fix your issue.

    .grid{padding:0}

    And the borders on each of those if of course not the best way to do the gutters.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.