StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>The How</strong></p> <p><a href="http://jsfiddle.net/L9GEa/">http://jsfiddle.net/L9GEa/</a></p> <p><strong>The Why</strong></p> <ol> <li>One might intuitively assume (as I once did) that the html element already has a determined height, but it does not (at least in this context). Luckily (or by design) this one element has the unique property of it's height being determinable when it is assigned a percentage height. That is the essential concept because in order to calculate (determine) the height of any other element which is assigned a percentage height you must also be able to determine the height of it's parent.</li> <li>Anyone that has worked with CSS and the DOM enough likely will tell you they <em>hate</em> floats. This is because it pulls the element out of the flow, which requires additional work and thinking to juggle the effects. Instead use display:inline-block;vertical-align:top; with the one caveat that you will then have to add html comments around any white space between those elements.</li> </ol> <p><strong>The CSS</strong></p> <pre><code>.maindiv { overflow:hidden; border:#000 1px solid; width:450px;min-height:250px; /*changes*/ height:100%; } .left_inner { float:left; width:200px; min-height:100%; background:#00CC33; /*changes*/ float:none; display:inline-block; vertical-align:top; } .right_inner { float:left; width:150px; background:#C93; /*changes*/ float:none; display:inline-block; vertical-align:top; } /*changes*/ html, body{ height:100%; } </code></pre> <p><strong>The HTML</strong></p> <pre><code><div class="maindiv"> <div class="left_inner">Left Block content</div><div class="right_inner">Right block content<br />sample txt<br />sample txt</div> </div> </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