column-gap CSS: doesn't apply to last column?


  • Gist: I'm wondering if there's a way to add space to the right side of horizontally scrolling, multi-column content that uses the column-count/column-width CSS properties. Padding/margin works on the container, not the columns, and column-gap only applies space between columns, and doesn't work like adding margin/padding to columns.

    So, I'm trying to just building a simple page of content that shows a basic html document in a horizontally scrolling 'reader' type format.

    Basically I just have a containing section element with all the content inside.

    <section id="content">
      <p>Lorem Ipsum...</p>

    To that section element I'm applying the following CSS:

    section#content {
      padding-top: 0 120px 25px 120px;
      column-count: 2;
      column-gap: 120px;
      overflow-x: auto;
      text-align: justify;

    The content appears nicely. So, say I have enough content in that <section> so that 4 columns are created. When you first load it 2 columns fit into the <section> and you don't get any 'peek' of the 3rd column until you scroll right. Looks good! However, the very last column doesn't get that right column-gap space to its side, which means that it buts right up against the side of the window and messes up the alignment of that last 'screen' of content. I.e. the 2nd column's content is still somewhat visible at the left side of the window.

    I tried to post some images, but msdn won't let me do so until my account is "verified" despite there being no verification email in my inbox, nor seeming to provide any sort of link to information about how to go about starting the verification process. *facepalm*

    • Edited by Wes Hodgson Thursday, October 11, 2012 6:08 PM fixed some spacing
    Thursday, October 11, 2012 6:08 PM

All replies

  • Hi Wes,

    That makes sense right?  You don't have a gap at the end of your column because there is no data following the last child.  If you want one, you could apply a right margin to your last column.  Perhaps using a CSS selector for the last child.



    Jeff Sanders (MSFT)

    Monday, October 15, 2012 4:07 PM
  • Sure, it's probably correct to define the column-gap property as only pertaining to the space between columns. But it also feels wrong to give the last child a right margin just to space out the right side of my column. :)

    In my case I have a padding applied to 3 sides of my content container. In my code sample above I have a mistake in the CSS so that the property is "padding-top", but that should obviously be simply "padding". Anyway, if I have a right-padding applied to the container that the content is appearing in, shouldn't the content within it scroll over so that the right side of the content aligns with the interior padding of the container, not its right-edge? Hoping that makes sense.

    Here's a couple images showing what I mean.. red border is the interior size of the <section> (ie. with padding), and the blue border is the exterior size of the <section> (ie. where the border of the element is). If the first column of content aligns with the left red line, shouldn't the last column align with the right red line?


    ps. excuse my Hipster Ipsum. ;)
    • Edited by Wes Hodgson Monday, October 15, 2012 5:50 PM
    Monday, October 15, 2012 5:49 PM
  • I would need a repro of this to investigate further.  I assume this is not unique to Windows Store apps so simple static info in an HTML file would suffice.  Can you list it here?

    Jeff Sanders (MSFT)

    Monday, October 15, 2012 6:11 PM
  • Hrm.. I just realized that in my example the browser is essentially scrolling the <body>, as opposed to scrolling the <section>. I.e. if there was a heading in the space at the top of the window, it would scroll out of the viewport when you swiped the content over. However, setting overflow-x: auto; on the <section> doesn't seem to help with the spacing.

    See these two fiddles -- columns only work in IE10, obv:

    Also, using the selector #content p:last-child doesn't work if the last paragraph spans multiple columns, as then multiple columns get that extra right spacing. I guess I could programmatically add some sort of spacer element at the end of #content, but that makes me feel dirty. :)

    eg: http://jsfiddle.net/MDC5h/7/

    Monday, October 15, 2012 8:47 PM
  • Anyone know how to get the last column to space properly in my examples in the previous post?

    I'd link them again, but apparently I'm not allowed to post links/images until my account is confirmed, despite already posting links/images above. :)

    Monday, October 22, 2012 10:59 PM