StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>EDIT: <strong>Please</strong> use Anthony's solution! It meets all of the requirements without any terribly hacky CSS! If you do need to support older browsers, feel free to use my solution (but, srrsly, Anthony's solution is perfect for most cases).</p> <hr> <p>I don't know how I haven't tried this solution yet, but this seems to work even better than <a href="https://stackoverflow.com/questions/7699552/how-to-create-a-3-columns-fluid-fixed-fluid-layout">this</a> question's accepted answer! No rounding!</p> <p><a href="http://jsfiddle.net/ruMqY/7/" rel="nofollow noreferrer"><strong>solved!</strong></a></p> <p>If we think of the rounded 50% as a value (<strong><em>X</em></strong>) and constant width of B as value <strong><em>Y</em></strong>, then we need:</p> <p>width of A = <strong><em>X</em></strong><br> width of C = 100% - <strong><em>X</em></strong></p> <p>I decided to use this as my structure:</p> <pre><code><container> <a></a> <b></b> <c_holder> <c> </c> </c_holder> </container> </code></pre> <p>Q. How can we get C to have a width of <strong>container_width</strong> - <strong>X</strong>?<br> A. We give C a container called c_holder with width 100% and give C a left offset of <strong>X</strong> (50%).</p> <p>forget B for now...</p> <p>now we have 2 divs next to eachother... each roughly 50% but adding up to exactly 100%.</p> <p>Throw all of these into a container, and give this container a margin-right of <strong><em>Y</em></strong> (the width of the B div). now we have A and C next to eachother, but taking up 100% - <strong><em>Y</em></strong> of the width.</p> <p>give c_holder a left offset of <strong><em>Y</em></strong> and drop B in between A and c_holder. apply a left float on A and B.</p> <p>now A's width is <strong><em>X</em></strong>, B's width is <strong><em>Y</em></strong>, C's total left offset is <strong><em>X</em></strong> + <strong><em>Y</em></strong>, and C's visible width is <strong>100% of the container</strong> - <strong>X</strong> - <strong>Y</strong>.</p> <p>kinda funky, but it's worked perfectly in IE7, Chrome, and Safari. I'll test FF later.</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