I can't manage positioning of divs in css and html -

I can't manage positioning of divs in css and html -

i'm creating website , adding divs. problem main div, container, not next number of divs within of it. divs within keeps on overlapping on , not follow container. help me find problem. thanks. below code:

for css:

.container{ position: relative; height: 100%; margin: 0 auto; width: 100%; max-width: 1100px; background-color: #fff; -moz-box-shadow: 0px 0px 6px 7px #ccc; -webkit-box-shadow: 0px 0px 6px 7px #ccc; box-shadow: 0px 0px 6px 7px #ccc; } .cities{ position: relative; top: 110px; } .top{ position: relative; top: 120px; left: 25px; max-width: 500px; }

for html:

<div class="container" > <div class="cities"> <p style="font-weight: bold; font-size: 18px;">kwiktable makati <a href="#" style="color: black; float: right; margin-right: 5px; ">mandaluyong </a> <a href="#"style="color: black;float: right;margin-right: 5px; ">pasig </a> <a href="#"style="color: black;float: right;margin-right: 5px; ">quezon city </a> <a href="#"style="color: black;float: right;margin-right: 5px; ">taguig </a></p> </div> <hr style="position: relative; top: 120px; width: 1060px; margin-right: auto; margin-left: auto;"> <div class="top"> <?php include'content1.html';?> </div> <hr class="middle" style="position: relative; top: -300px;"/> <div class="best"> <h1 style="position: relative; width: 350px; left: 50px; height: 80px; color: #fff; text-shadow: 0px 0px 3px #000;"><span style="position: absolute; top: 20px; left: 40px"> kwiktable's best!</span></h1> <?php include'best.php';?> </div>

here whats happening: http://tinypic.com/r/o69qqe/8

try positioning div's margin , padding instead of top , left. is, occupy much space if there no (positional) styling on them. it's not .container isn't containing, can't tell. if instead of using top:125px utilize padding-top:125px container expand. because container see element taking space. (execpt in case of floats, need clear them.)

html css