Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I once found an amazing template that amazingly works on all browsers, even IE6, I cant remember the link, but here is the CSS and the HTML for it:</p> <p>CSS:</p> <pre><code>body, html{ height: 100%; } body, p { margin: 0; padding: 0; } #wrapper { min-height: 100%; } * html #wrapper { height: 100%; } /*HEADER------------------------------------*/ #header { width: 100%; background: #666; } #header_900 { width: 960px; height: 100px; margin: 0 auto; position: relative; overflow: hidden; } /*FOOTER------------------------------------*/ #footer { width: 100%; height: 100px; margin: -100px auto 0 auto; /*THIS SHOULD BE EQUAL TO THE FOOTERS HEIGHT*/ position: relative; background: #666; } #footer_900 { width: 960px; height: 100px;/*THIS IS THE FOOTERS HEIGHT*/ position: relative; margin: 0 auto; } /*CONTENT------------------------------------*/ #content { width: 100%; padding-bottom: 100px; /*THIS SHOULD BE EQUAL TO THE FOOTERS HEIGHT*/ } #content_900 { width: 960px; margin: 0 auto; overflow: hidden; } </code></pre> <p>And here is the HTML:</p> <pre><code>&lt;body&gt; &lt;div id="wrapper"&gt; &lt;div id="header"&gt; &lt;div id="header_900"&gt; &lt;p&gt;header&lt;/p&gt; &lt;/div&gt;&lt;!--header_900--&gt; &lt;/div&gt;&lt;!--header--&gt; &lt;div id="content"&gt; &lt;div id="content_900"&gt; &lt;p&gt;content&lt;/p&gt; &lt;/div&gt;&lt;!--content--&gt; &lt;/div&gt;&lt;!--content--&gt; &lt;/div&gt;&lt;!--wrapper--&gt; &lt;div id="footer"&gt; &lt;div id="footer_900"&gt; &lt;p&gt;footer&lt;/p&gt; &lt;/div&gt;&lt;!--footer_900--&gt; &lt;/div&gt;&lt;!--footer--&gt; &lt;/body&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    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. 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