Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>There are several solutions to this, probably the post popular of which is the Holy Grail method. It's a little above my head, but these links explain it pretty well.</p> <p><a href="http://alistapart.com/article/holygrail" rel="nofollow">http://alistapart.com/article/holygrail</a></p> <p><a href="http://matthewjamestaylor.com/blog/perfect-3-column.htm" rel="nofollow">http://matthewjamestaylor.com/blog/perfect-3-column.htm</a></p> <p>I would start with A List Apart's article. Good luck.</p> <p>After re-reading it, I think this is what I would do:</p> <p><strong>HTML</strong></p> <pre><code>&lt;div id="header"&gt; &lt;/div&gt;&lt;div id="container"&gt; &lt;div id="center" class="column"&gt;&lt;/div&gt; &lt;div id="left" class="column"&gt;&lt;/div&gt; &lt;div id="right" class="column"&gt;&lt;/div&gt; &lt;/div&gt;&lt;div id="footer"&gt;&lt;/div&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>body { min-width: 550px; /* 2x LC width + RC width */ } #container { padding-left: 200px; /* LC width */ padding-right: 150px; /* RC width */ } #container .column { position: relative; float: left; } #center { width: 100%; } #left { width: 200px; /* LC width */ right: 200px; /* LC width */ margin-left: -100%; } #right { width: 150px; /* RC width */ margin-right: -150px; /* RC width */ } #footer { clear: both; } /*** IE6 Fix ***/ * html #left { left: 150px; /* RC width */ } </code></pre> <p>You'll need to adjust some of the dimensions, but the inline comments should help with that. So there you have it. The Holy Grail Layout.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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