StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This not the most elegant solution, but it works. I wanted to go the pure CSS route, but couldn't figure it out. Nice work, jblasco and Kyle Sevenoaks, on figuring that out!</p> <p>Here is my <a href="http://jsfiddle.net/jackrugile/DBs5J/" rel="nofollow">jsFiddle demo</a>. If you don't mind using a little JavaScript though (utilizing jQuery in my example):</p> <p><strong>HTML:</strong></p> <pre class="lang-html prettyprint-override"><code><div id="wrapper"> <div class="side"></div> <div id="middle">One line of text.</div> <div class="side"></div> </div> </code></pre> <p><strong>CSS:</strong></p> <pre class="lang-css prettyprint-override"><code>#wrapper { margin: 0 auto; width: 1000px; } #wrapper div { float: left; height: 300px; } .side { background: #ddd; } #middle { background: #eee; padding: 0 30px; text-align: center; } </code></pre> <p><strong>JavaScript:</strong></p> <pre class="lang-js prettyprint-override"><code>var adjustSize = function(){ // Declare vars var wrapper = $('#wrapper'), middle = $('#middle'), totalWidth = wrapper.width(), middleWidth = middle.width(), middleOuterWidth = middle.outerWidth(), remainingWidth = totalWidth - middleOuterWidth, sideWidth; if(remainingWidth % 2 === 0){ // Remaining width is even, divide by two sideWidth = remainingWidth/2; } else { // Remaining width is odd, add 1 to middle to prevent a half pixel middle.width(middleWidth+1); sideWidth = (remainingWidth-1)/2; } // Adjust the side width $('.side').width(sideWidth); } </code></pre>

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