Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Is <a href="http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/" rel="nofollow noreferrer">this</a> what you're looking for?</p> <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>body { margin: 0; padding: 0; border: 0; overflow: hidden; height: 100%; max-height: 100%; } #framecontent { position: absolute; top: 0; bottom: 0; left: 0; width: 200px; /*Width of frame div*/ height: 100%; overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ background: navy; color: white; } #maincontent { position: fixed; top: 0; left: 200px; /*Set left value to WidthOfFrameDiv*/ right: 0; bottom: 0; overflow: auto; background: #fff; } .innertube { margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/ } * html body { /*IE6 hack*/ padding: 0 0 0 200px; /*Set value to (0 0 0 WidthOfFrameDiv)*/ } * html #maincontent { /*IE6 hack*/ height: 100%; width: 100%; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="framecontent"&gt; &lt;div class="innertube"&gt; &lt;h1&gt;CSS Left Frame Layout&lt;/h1&gt; &lt;h3&gt;Sample text here&lt;/h3&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="maincontent"&gt; &lt;div class="innertube"&gt; &lt;h1&gt;Dynamic Drive CSS Library&lt;/h1&gt; &lt;p style="text-align: center"&gt;Credits: &lt;a href="http://www.dynamicdrive.com/style/"&gt;Dynamic Drive CSS Library&lt;/a&gt; &lt;/p&gt; &lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> </p> <p>I feel your pain, but try not to look at it as time wasted. I'm sure you have a much better grasp of CSS than you previously did. Keep working with it and you'll start seeing the advantages. I personally have found CSS to be one of those things that takes a lot of practice to become proficient in. I've been using CSS based layouts for 5 years and I still learning interesting tricks everyday.</p>
 

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