Bug 41796 – Right margin or padding of multicolumn text does not appear when it overflow in the x-direction

• Component: CSS
• Status: RESOLVED FIXED

Here's some sample code that shows this:

<div class=row style="-webkit-column-count:2; -webkit-column-width:402px; height:200px; -webkit-column-gap:60px; margin:100px">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

[Andy E]

This poorly described bug report could do with some clarification, so here goes...

I've experienced this problem, too.  When right padding is applied to an element containing columns, webkit adjusts the column distribution to "eat into" the padding.

The issue can be seen more clearly over at http://jsfiddle.net/XLPjV/—apologies for the markup, I had another issue using <span> instead of <a> so I reproduced the problem as it appeared in my live code.  You'll notice that the inner elements should have a gap of 6px (3px per left/right margin), but this isn't the case with the columns, despite having a gap of 0px.  Instead, the gap is increased.

Each container <div> is scrolled all the way to the right, and you'll notice that the <div> with columns has a smaller gap between the last element child and the right border, despite having the same padding value.

I hope that clears this report up a little to be more understandable.

[cathiechen]

Created attachment 425959 [details]
Multicolumn-doesn't-paint-overflow-area

It seems the test case in #2 is not available now.

I met an issue similar to this one. Multicolumn doesn't paint the horizontal overflow area of a relative container. I uploaded a test case for this.

[Rob Buis]

This is fixed by the bug 238854 patch.