html - CSS Design: Three Divs -
i want arrange "leftbox" "midbox" , "rightbox" divs next each other. when used float:left, footer goes top.
anyone can me, can make them arrange next each other , still footer in lower part.
anyone change codes become smaller in size.
here codes.
<html> <head> <title> xxx </title> </head> <style> body{ margin-top:0px; margin-left:0px; margin-right:0px; margin-bottom:0px; background-color:#dedede; } #header{ background: none repeat scroll 0% 0% rgb(241, 241, 241); background-color: rgb(68, 68, 68); background-image: none; background-repeat: repeat; background-position: 0% 0%; background-size: auto auto; height: 31px; position:fixed; //position:relative; top: 0px; width: 100%; z-index: 985; min-width: 980px; } #header2{ background: none repeat scroll 0% 0% rgb(241, 241, 241); background-color: rgb(241, 241, 241); background-image: none; background-repeat: repeat; background-size: auto auto; border-bottom: 1px solid rgb(221, 221, 221); border-bottom-width: 1px; border-bottom-style: solid; height: 71px; position:fixed; //position:relative; top: 31px; width: 100%; z-index: 985; min-width: 980px; } #wrapper{ position:relative; width:980px; height:auto; margin:auto; } #logo{ position:absolute; top:0px; left:10px; width:102px; height:60px; font:68px blue highway; color:#01b5ce; } #logo:hover{ color:#aaaaaf; } #navigation{ position:absolute; top:30px; left:170px; width:auto; height:40px; } #navigation a{ position:relative; top:20px; width:auto; height:30px; font:18px corbel; margin-left:5px; border-left:1px solid #dddddd; text-decoration:none; color:#aaaaaf; } #navigation a:hover{ color:#01b5ce; } #access{ position:absolute; top:5px; right:10px; width:auto; height:20px; } #access a{ position:relative; text-decoration:none; color:#01b5ce; font:18px corbel; margin-left:10px; } #body{ position:relative; top:100px; width:980px; height:auto; margin:auto; background-color:#ffffff; } #leftbox{ position:relative; top:10px; left:10px; width:160px; height:auto; background-color:red; } #ads{ position:relative; top:10px; width:160px; height:auto; background-color:green; } #midbox{ position:relative; top:10px; margin-top:10px; left:10px; width:500px; height:auto; background-color:red; } #latest{ position:relative; top:10px; width:500px; height:auto; background-color:green; } #rightbox{ position:relative; top:10px; margin-top:10px; left:10px; width:280px; height:auto; background-color:red; } #top{ position:relative; top:10px; width:280px; height:auto; background-color:green; } .title{ position:relative; width:100%; height:20px; background-color:yellow; font:20px wlm carton; color:#cc0000; } #footer{ background: none repeat scroll 0% 0% #444444; background-color: #444444; background-image: none; background-repeat: repeat; background-position: 0% 0%; background-size: auto auto; height: 100px; position: relative; top: 105px; width: 100%; z-index: 985; min-width: 980px; } #footercontent{ position:relative; top:10px; margin:auto; width:980px; height:80px; color:#ffffff; font: 12px arial,tahoma; } #ads ul{ list-style:none; padding:0; margin:0; width:390px; height:auto;} #ads ul li{ padding:5px; margin:0; width:390px; height:auto; float:left;} #latest ul{ list-style:none; padding:0; margin:0; width:390px; height:auto;} #latest ul li{ padding:5px; margin:0; width:390px; height:auto; float:left;} #latest #wrapper{width:490px; height:auto; float:left; color: #7a7a7a;text-align: left; font-family:arial, helvetica, sans-serif; font-size:12px;} #latest #date{background-color:#f3f3f3; border-top:1px solid #b6b6b6; border-left:1px solid #b6b6b6; border-right:1px solid #b6b6b6; border-bottom:1px solid #b6b6b6; width:70px; height:60px; float:left;} #latest #content{ float:left; width: 405px; height:auto; margin: 0 0 0 10px;} #top ul{ list-style:none; padding:0; margin:0; width:390px; height:auto;} #top ul li{ padding:5px; margin:0; width:390px; height:auto; float:left;} </style> <body> <div id=header> <div id=wrapper> <div id=access> <a href=''>register</a> <a href=''>login</a> </div> </div> </div> <div id=header2> <div id=wrapper> <div id=logo> <b><font color='#aaaaaf'>x</font>xxx</b> </div> <div id=navigation> <a href=''> x</a> <a href=''> x</a> <a href=''> x</a> <a href=''> x</a> <a href=''> x</a> </div> </div> </div> <div id=body> <div id=leftbox> <div id=ads> <div class=title> ads </div> <ul> <li><a href=''><img src='' width=160 height=180></a></li> <li><a href=''><img src='' width=160 height=180></a></li> <li><a href=''><img src='' width=160 height=180></a></li> </ul> </div> </div> <div id=midbox> <div id=latest> <div class=title> latest album </div> <ul> <li> <div id='wrapper'> <div id='date'> <div class=month><b>jan</b></div> <div class=day>01 2013</div> </div> <div id='content'> <b>happy new year!</b> <br> wishing blessings of new year...the warmth of home, love of family , company of friends. </div> </div> </li> </ul> </div> </div> <div id=rightbox> <div id=top> <div class=title> featured djs </div> <ul> </ul> </div> </div> </div> <div id=footer> <div id=footercontent> <center> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx <br><br> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </center> </div> </div> </body> </html>
a common problem friend!
when float elements, it's hard parent element keep track on height. in order parent element know it's children height, append "clearfix".
css
.clear { clear: both; } then, append element on same level of float elements.
html
<div id="parent"> <div id="left"></div> <div id="center"></div> <div id="right"></div> <!-- lets clear shizzle --> <div class="clear"></div> </div>
Comments
Post a Comment