Проблем с Sticky footer

pro12

Registered
Това ми е html5 страницата
HTML:
<!DOCTYPE html>
<html>
  <head>
    <title>The Sticky Footer Way</title>
    <link rel='stylesheet' href='style.css'>
		<meta name="viewport" content="width=device-width,initial-scale=1">

  </head>
  <body>
    <header>
            <nav>
                <li>Your menu</li> 
            </nav>
        </header>
	<main class='wrapper'>
	<section class="left">
left
       </section >
	   <aside class="aside-right">
    right
</aside> <div class='push'></div>
    </main>	   

    <footer class='footer'>This is my Footer</footer>
  </body>
</html>
Това ми е css
[css]html, body {
height: 100%;
margin: 0;

}
.wrapper {
min-height: 100%;

margin-bottom: -100px;
}
header
{
width:100%;
height:66px; background: red;
}
.left
{
width:50%;
height:100%;
background: yellow;
float:left;
} .aside-right{
width:50%;
background: blue;
float: right; }
.footer,
.push {
height: 100px;
}
.footer {
background-color: #a12444;
}[/css]
Ако в лявата част имам дълг текст и мине през footer тои се вдига на горе.
Но ако премахна float:left; и float: right; footer си седи най отдолу на страницата, но не знам как да направя лявата и дясната част да изглеждат както трябва без float:left; и float: right;.
 
Пробвай с този css
Код:
html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px;
}
.wrapper {
    min-height: 100%;
    margin-bottom: -100px; 
}
header {
    width:100%;
    height:66px; background: red;
 }
.left {
    width:50%;
    height:100%;
    background: yellow;
    float:left;
 } 
 .aside-right { 
    width:50%;
    background: blue;
    float: right; 
 }
footer {
    background-color: #a12444;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}
Ето и демо: https://jsfiddle.net/p0h1ag51/
 
vinsbg каза:
Ето и демо: https://jsfiddle.net/p0h1ag51/

Само да предупредя, че с този начин, ако имаш текст (или някакви елементи) в лявата и дясната секция няма да се вижда от фуутъра.

Пример: https://jsfiddle.net/p0h1ag51/1/
 
Fakeheal каза:
vinsbg каза:
Ето и демо: https://jsfiddle.net/p0h1ag51/

Само да предупредя, че с този начин, ако имаш текст (или някакви елементи) в лявата и дясната секция няма да се вижда от фуутъра.

Пример: https://jsfiddle.net/p0h1ag51/1/
Правилно. Пропуснал съм го.

Не знам колко е "елегантно", но в този случай може един clear:both да се сложи:
https://jsfiddle.net/p0h1ag51/2/
 
С clear:both footer се вдига на горе.
9140658x.png

Без clear:both footer си седи най отдолу на страницата.
9140663F.png

И по двата начина дългият текст в лявата част отива под footer
 
И на двете снимки се вижда, че <div class="clear"></div> си го сложил в main-a. Премести го извън мейна. Извън него при мен си работи, както на демото.


6861.png
 

Горе