Note that there are some explanatory texts on larger screens.

plurals
  1. POCan someone help me keep the footer at the bottom of the page?
    primarykey
    data
    text
    <p>I've looked up how to stick the footer to the bottom of the page but i'm having trouble making it actually work! If i post my code can you look at it and change it to make it work, but also explain how you did it?</p> <p>HTML:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Aaron Kelsey - Home&lt;/title&gt;`enter code here` &lt;link rel="stylesheet" type="text/css" href="style.css" media="screen" /&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="wrapper"&gt; &lt;div class="header_wrapper"&gt; &lt;ul id="navigation"&gt; &lt;li&gt;&lt;a href="index.html"&gt;HOME&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="about.html"&gt;ABOUT&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="work.html"&gt;WORK&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="contact.html"&gt;CONTACT&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="line-1"&gt;&lt;/div&gt; &lt;div id="line-2"&gt;&lt;/div&gt; &lt;div class="content"&gt; &lt;img class="header" src="images/header.png"&gt; &lt;/div&gt; &lt;div class="footer"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>CSS</p> <pre><code>* { margin: 0px; padding: 0px; } body{ margin: 0 auto; padding:0; margin: 0; height: 100%; background-color: #F5F5F5; } img.header{ display: table; margin: 0 auto; } #wrapper{ min-height: 100%; position: relative; } .header_wrapper{ display: table; margin: 0 auto; width: 1000px; height: 50px; position: relative; padding:10px; } .content{ position: relative; margin: 0 auto; width: 1000px; height: 100%; min-height: 100%; padding:10px; padding-bottom:150px; } .footer{ position: absolute; margin: 0 auto; bottom: 0px; width: 100%; height: 150px; background-color: #E0E0E0; } #line-1{ position: absolute; margin: 0 auto; width: 100%; height: 1px; background-color: #E0E0E0; top: 10px; } #line-2{ position: absolute; margin: 0 auto; width: 100%; height: 1px; background-color: #E0E0E0; top: 50px; } #navigation { position: relative; width: 1000px; height: 10px; font-size: 18px; font-family: Arial; font-weight: bold; top: 20px; text-align: center; } #navigation li { display: inline; padding: 50px; } #navigation a { text-decoration: none; color: #A9A9A9; } #navigation a:hover { color: #1e1e1e; } </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.
 

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