StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can't fix it the way Fx does it, but you can try from the other side.</p> <p>Why are thee gaps there? Because of the rounding errors. So, we must ensure that there'd be no rounding errors. How'd be do that? At first, we'd <em>divide</em> all the space we have and then <em>multiply</em> the inner element, so we'd get the situation where the rounding error occurs on the parent and all the children in this context would be ok.</p> <p>There is a fixed example from the bugzilla: <a href="http://jsfiddle.net/2tmjw/" rel="nofollow">http://jsfiddle.net/2tmjw/</a></p> <p>I've added a wrapper with the following styles:</p> <pre><code>#wrapper4wrapper { position: absolute; top: 10%; left: 10%; width: 8%; height: 8%; } </code></pre> <p>And changed the original wrapper to be</p> <pre><code>#wrapper { position: absolute; top: 0; left: 0; width: 1000%; height: 1000%; } </code></pre> <p>You can see it in action while resizing the window or the fiddle frame. You can notice that the width of the wrapper is changing by steps: it's where all the rounding errors go.</p> <p>If you wish to still center a page, you can try something like this: <a href="http://jsfiddle.net/2tmjw/1/" rel="nofollow">http://jsfiddle.net/2tmjw/1/</a> — but with absolute positioning it's somewhat hard to position it ideally in center. But when it's not absolute positioned and you need to position it horizontally, you can use <code>display: inline-block</code> with <code>text-align: center</code> or <code>display: block</code> with <code>margin: auto</code>.</p> <p>Also, the ratio of the parent's shrinking and the children's expand must be chosen from what parts you want to divide the children. The more precise you want them to be, the less width would the parent have, but the steps would grow too.</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