StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POInline-block element gets pushed to next line
text
Body
copied!<p>I'm building a WordPress theme (was told by WP SE to bring this question here), but I have a problem with my footer widget area. All the widgets seem to layout properly with my CSS except the Recent Posts widget. It seems to double the margin-right of the previous element.</p> <p>The widgets are sized to a width of 33% of their container. I'm giving the first two of three widgets on each row a right margin of 0.5% (33 * 3 + 0.5 * 2 = 100) and using an nth-child selector to give every third widget 0 right padding.</p> <p>This works beautifully for most widgets as you can see in the first row on the live site. On the second row, I included the Recent Posts widget as the second element. This introduces the additional margin to the right of the preceding element.</p> <p>You can see that Chrome Dev Tools cannot account for this additional margin. I have highlighted it and the preceding element in these screenshots to show their margins.</p> <p><a href="http://dl.dropboxusercontent.com/s/2l6dui7f0zrg9ru/2013-07-11%20at%208.49%20AM.png" rel="nofollow noreferrer">Preceding widget http://dl.dropboxusercontent.com/s/2l6dui7f0zrg9ru/2013-07-11%20at%208.49%20AM.png</a> <a href="http://dl.dropboxusercontent.com/s/s3okkwwgjma4y09/2013-07-11%20at%208.59%20AM.png" rel="nofollow noreferrer">Recent Posts widget http://dl.dropboxusercontent.com/s/s3okkwwgjma4y09/2013-07-11%20at%208.59%20AM.png</a></p> <p>Can anyone tell me what I might need to do to correct this problem? This pushes the widget after the Recent Posts widget to the next row and makes a big mess.</p> <p>If you want to see the problem, go to <a href="http://www.kellyshipe.com/" rel="nofollow noreferrer">http://www.kellyshipe.com/</a>. You'll also see that the row above is perfect with different widgets.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload