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
Post a Comment