html5 - footer text moved from footer background -

I have a layout with HTML elements like section & amp; Foot Note. The problem is that the footer is very oddly displayed: the footer (black text on the red background in the color below) is taken down and the footer is not displayed in the background color padding property also works incorrectly Does.

HTML code:

  & lt; Section & gt; & Lt; Div class = 'post' & gt; & Lt; Div class = 'post-title' gt; & Gt; Title for 1 & lt; / Div & gt; & Lt; Div class = 'post-subtitle' & gt; & Lt; Div class = 'added' & gt; BY & lt; SPAN class = 'blue' & gt; Mark XXXX & lt; / SPAN & gt; & Lt; / Div & gt; & Lt; Div square = 'added-at' & gt; 10: 10: 00 12/12/2014 & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = 'post-body' & gt; & Lt; P & gt; Body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body Body body body body body body body body body & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = 'post' & gt; & Lt; Div class = 'post-title' gt; & Gt; Title for 1 & lt; / Div & gt; & Lt; Div class = 'post-subtitle' & gt; & Lt; Div class = 'added' & gt; BY & lt; SPAN class = 'blue' & gt; Mark XXXX & lt; / SPAN & gt; & Lt; / Div & gt; & Lt; Div square = 'added-at' & gt; 10: 10: 00 12/12/2014 & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = 'post-body' & gt; & Lt; P & gt; Body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body Body body body body body body body body body & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Section & gt; & Lt; On one hand & gt; Left menu! Left menu! Left menu! Left menu! Left menu! Left menu! Left menu! Left menu! Left menu! Left menu! Left menu! Left menu! Left menu! Left menu! Left menu! Left menu! & Lt; / One side & gt; & Lt; Footer & gt; & Lt; Div style = "float: left" & gt; Copy Taxes All Rights Reserved & lt; / Div & gt; & Lt; Div style = "float: right" & gt; Terms & Conditions for Privacy & lt; / Div & gt; & Lt; / Footer & gt;  

CSS code:

  .page {/ * center horizontally / margin-left: auto; Margin-right: auto; / * Center horizontally * / outline: 1px solid black; Width: 960px; } .blue {color: blue; } .added-by {float: left; Font-size: 10px; } .added-at {float: right; Font-size: 10px; } .post {// background color: yellow; } .post-subtitle {// padding: 0 10px; } Section {padding: 10px; Width: 800 pixels; Display area; // background color: red; Swim left; Box-size: border-box; } (Padding: 10px; display area; right boat; max-width: 150px; background color: yellow; box-size: border-box;} footer {padding: 10px; background color: red; // box -Size: border-box; clear both;} / OK for old browser / article, on one side, digitization, figure, footer, header, hgprov, nav, section {display: block;}  

This is happening because the footer shows children divs Float is not clearing the float must be cleared using any one of the solutions. As is clear: both; does not always work in some scenarios, more information and.

Example:

  .clearfix: after {content: "."; Display area; Clear both; Visibility: hidden; Line- Height: 0; height: 0;} .clearfix {display: inline-block;} html [xmlns] .clarfix {display: block;} * html .clarfix {height: 1%;}  

New HTML:

  & lt; Footer class = "clearfix" & gt; .. Your code & lt; / Footer & gt;  

New CSS: ( 100% width for footer now )

  footer { Width: 100%; }  

Demo:

In addition, the FYI, // Is a valid comment in CSS CSS accepts / * * / for comments only.

Two options:

remove float: left and float: right from the inline styles Articles children's divs and then use this CSS. This is an alternative option if you do not want to use a clearfix approach.

  Footer {white-space: nowrap; Footer (display): inline-block; Width: 50%; } Footer DIV {text-align: right; }  

Demo: