StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h2>Pure CSS solution</h2> <p><a href="http://jsfiddle.net/avrahamcool/58mkp/1/"><strong>Working Fiddle</strong></a></p> <p>Using CSS2.1 only, Work with all browsers (IE8+), <strong>without specifying any height or width.</strong></p> <p>That means that if your header suddenly grows longer, or your left navigation needs to enlarge, you don't have to fix <strong>anything</strong> in your CSS.</p> <p>Totally responsive, simple & clear and very easy to manage.</p> <pre><code><div class="Container"> <div class="Header"> </div> <div class="HeightTaker"> <div class="Wrapper"> <div class="LeftNavigation"> </div> <div class="Content"> </div> </div> </div> </div> </code></pre> <p><strong>Explanation:</strong> The container <code>div</code> takes 100% height of the body, and he's divided into 2 sections. The header section will span to its needed height, and the <code>HeightTaker</code> will take the rest. How is it achieved? by floating an empty element along side the container with 100% height (using <code>:before</code>), and giving the <code>HeightTaker</code> an empty element at the end with the clear rule (using <code>:after</code>). that element cant be in the same line with the floated element, so he's pushed till the end. which is exactly the 100% of the document.</p> <p>With that we make the <code>HeightTaker</code> span the rest of the container height, without stating any specific height/ margin.</p> <p>inside that <code>HeightTaker</code> we build a normal floated layout (to achieve the column like display) with a minor change.. we have a <code>Wrapper</code> element, that is needed for the <code>100%</code> height to work.</p> <h2>Update</h2> <p><a href="http://jsfiddle.net/avrahamcool/vtxnF/10/"><strong>Here's</strong></a> the Demo with Bootstrap classes. (I just added one div to your layout)</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