Databases
StackOverflow2013
Postsdbo
POfooter ignores conent in the middle
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POfooter ignores conent in the middle
    text
    copied!<p>I want to add a footer to the bottom of the page, but it stays in middle, after like header content, and like ignores content bellow, so he stays in middle.</p> <pre><code>&lt;div id="content"&gt; &lt;ul&gt; &lt;li&gt; &lt;h3&gt;Custom clearance&lt;/h3&gt;&lt;br/&gt; &lt;img src="images/1st_min.png" style="width:360px; height: 160px;" alt="Custom clearance" /&gt;&lt;br/&gt; &lt;p style="width:360px;"&gt;Our employee proceeds the necessary customs documentation for exports, imports and transit of cargo. Our knowledge of the Latvian customs and tax legislation and our familiarity with.&lt;br /&gt;&lt;a href="#" style="float:right; padding-top:10px;"&gt;Learn more &lt;img src="images/arrow.png" alt="learn more" style="width:6px; height:9px;"/&gt;&lt;/a&gt; &lt;/p&gt;&lt;br/&gt; &lt;/li&gt; &lt;li&gt; &lt;h3&gt;Cargo Inspections&lt;/h3&gt;&lt;br/&gt; &lt;img src="images/2nd_min.png" style="width:360px; height: 160px;" alt="Custom clearance" /&gt;&lt;br/&gt; &lt;p style="width:360px; padding"&gt; Наш сотрудник переходит необходимой документации для таможенного экспорта, импорта и транзита грузов. Наши знания латышского таможенного и налоговогои.&lt;br /&gt;&lt;a href="#" style="float:right; padding-top:10px;"&gt;Learn more &lt;img src="images/arrow.png" alt="learn more" style="width:6px; height:9px;"/&gt;&lt;/a&gt; &lt;/p&gt;&lt;br/&gt; &lt;/li&gt; &lt;li&gt; &lt;h3&gt;Our Location&lt;/h3&gt;&lt;br/&gt; &lt;img src="images/3rd_min.png" style="width:360px; height: 160px;" alt="Custom clearance" /&gt;&lt;br/&gt; &lt;p style="width:360px;"&gt; Mūsu darbinieks ieņēmumi nepieciešamo muitas dokumentāciju, eksporta, importa un tranzīta kravas. Mūsu zināšanas par Latvijas muitas un nodokļu tiību aktus un mūsu.&lt;br /&gt;&lt;a href="#" style="float:right; padding-top:10px;"&gt;Learn more &lt;img src="images/arrow.png" alt="learn more" style="width:6px; height:9px;"/&gt;&lt;/a&gt; &lt;/p&gt;&lt;br/&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>content class style</p> <pre><code>#content { width: 100%; height:100%; display: block; } #content ul li { display: block; list-style: none; float: left; min-width:15%; } #content ul li &gt; h3 { text-decoration: none; display:block; float:left; font-size: 24px; margin: 0 0 0 20px; font-family: gothamlight; padding: 10px 20px 10px 20px; } #content ul li &gt; img { display: block; float:left; margin: 0 0 0 10px; padding: 0px 25px 0px 25px; } #content ul li &gt; p { text-decoration: none; line-height: 1.3; display:block; color: #404041; float:left; font-size: 14px; margin: 0 0 0 20px; padding: 5px 20px 5px 20px; display: block; } </code></pre> <p>And here is the footers style, wich is ok.</p> <pre><code> #footer { position:absolute; bottom:0; width:100%; height:60px; /* Height of the footer */ background:#6cf; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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