html - How to set footer as last element in all the websites -


please check jsfiddle code.which not coming @ end of page.footer comes before other divs gets finished data.

i expect master footer lastone footer appears before right , left divs.

css :  #main {     margin:auto;     width:90%;     background-color:#b0e0e6;     text-align: center; } #header {     margin:auto;     height:20px;     background-color:yellow; } #footer {     margin:auto;     height:100px;     background-color:yellow; } #content {     margin:auto;     width:100%; } #left {     float : left;     width:20%;     background-color:pink;     display: inline-block;  } #middle {     width:60%;     background-color:white;     float : left;     display: inline-block;  } #right {     width:20%;     background-color:green;     float : right;     display: inline-block;  }   #master-head {     margin:auto;     background-color:#b0e0e6;     text-align: center; } #master-foot {     margin:auto;     background-color:#b0e0e6;     text-align: center; } 

html :

<div id="master-head">master header</div> <div id="main">main  <div id="header">header</div>            <div id="content">              <div id="left">left              1<br> 2<br> 3<br>   4<br>1<br> 1<br>1<br>1<br>1<br> 1<br> 1<br> 1<br> 1<br>11<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br>   1<br>             <!-- 1<br> 2<br> 3<br>   4<br>1<br> 1<br>1<br>1<br>1<br> 1<br> 1<br> 1<br> 1<br>11<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br>   1<br>-->              1<br></div>              <div id="middle">middle</div>              <div id="right">right               1<br> 2<br> 3<br>  4<br>1<br> 1<br>1<br>1<br>1<br> 1<br> 1<br> 1<br> 1<br>11<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br>   1<br>              <!-- 11<br> 2<br> 3<br>     4<br>1<br> 1<br>1<br>1<br>1<br> 1<br> 1<br> 1<br> 1<br>11<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br>   1<br>-->              </div>            </div>           <div id="footer">footer</div> </div> <div id="master-foot">master footer</div> 

for #footer --

#footer { /* margin:auto; */ height:100px; background-color:yellow; margin-bottom: 0px; clear: both; } 

for #master-foot --

#master-foot { /* margin:auto; */ background-color:#b0e0e6; text-align: center; margin-bottom: 0px; clear: both; } 

Comments

Popular posts from this blog

how to proxy from https to http with lighttpd -

android - Automated my builds -

python - Flask migration error -