Board Thread:Support Requests - Getting Technical/@comment-24042083-20160102214853/@comment-4731443-20160105183747

Your CSS for the second example sets a width of 270px for the infobox container (default-infobox-container), 100px for default-infobox-line-left, and 200px for default-infobox-line-right. 100 + 200 > 270, so the excess runs outside the article container and is hidden by the overflow rule. Your first example has the same problem, but with a width of 250px for the container.

You need to either make a wider infobox, or set slimmer columns/use percentages.

As far as I can tell, the reason why having a title or image fixes this is that these infoboxes use. As a result, only the first row determines the width of the entire table. You'll notice that in your first example, both columns of data have an effective with of 125, adding up to the limit of 250 set by the container and respected by the title row (which has no set width and uses 100% of the available width). If you change your widths to something like 40% and 60%, your columns will be fixed in the second use case, but they will still split up the width 50/50 when there's a title or image (because, again, only the first row's width is considered).

So another alternative would be to ditch  so you can set different widths on different elements.

Or you could use portable infoboxes, which are designed to adapt to mobile devices and don't use tables at all.