Note that there are some explanatory texts on larger screens.

plurals
  1. POContainer and bottom not positioned right
    primarykey
    data
    text
    <p>I have this HTML code</p> <pre><code>&lt;body&gt; &lt;div id="container"&gt; &lt;div id="header"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="index.php" class="active"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="login.php" class="active"&gt;&lt;span&gt;Login&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;&lt;span&gt;Left Menu&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="threecol"&gt; &lt;div class='col3'&gt; xg&lt;br /&gt;&lt;br /&gt;hxh&lt;br /&gt;&lt;br /&gt;x&lt;br /&gt;&lt;br /&gt;f&lt;br /&gt;&lt;br /&gt;h &lt;/div&gt; &lt;div class="col2"&gt; jjh&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;ghjh&lt;br /&gt;x&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;g &lt;/div&gt; &lt;div class='col1'&gt; kgkdfh &lt;/div&gt; &lt;/div&gt; &lt;div id="footer"&gt; &lt;p&gt;This page &lt;a href=""&gt;Powered&lt;/a&gt; by &lt;a href=""&gt;dddddd&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>and the CSS:</p> <pre><code> #container { width: 98%; margin: 0 auto; } #header { clear:both; width:100%; } .threecol { position: relative; } .col1 { left: 1%; position: absolute; width: 15%; background-color: #eee; } .col2 { background-color: white; left: 16%; width: 58%; position: relative; } .col3 { left: 74%; top :0; position: absolute; width: 24%; } #footer { margin: 0 auto; position: relative; bottom: 0; width:100%; border-top: 1px solid #000; } </code></pre> <p>What I'm getting is:</p> <ol> <li>container not in full page , there are some divs out of container</li> <li>footer not stayed in bottom , he up to divs.</li> </ol> <p>I'm lost between positioning and how to get the right result like I want. What am I doing wrong?</p> <p>FOR <strong>demo in <a href="http://jsfiddle.net/Z28Lq/" rel="nofollow noreferrer">jsfiddle</a></strong></p>
    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.
 

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