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
  • #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

    #151718
    TheDoc
    Moderator

    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.

    #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.

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