html - make a div inside a div -


i've below html code.

<!doctype html>  <html lang="en" xmlns="http://www.w3.org/1999/xhtml" style="margins"> <head>     <meta charset="utf-8" />     <style type="text/css">         .main {             width: 900px;             height: 320px;             border: 1px solid black;             position:relative;         }          .margins {             padding:10px 10px 10px 10px;             border: 1px solid black;          }          .top_h {             width: 720px;             height: 80px;             border: 1px solid black;         }          .mid {             display: inline-block;             clear: both;             margin-top: 10px;             margin-bottom: 10px;             border: 1px solid black;         }          .mid_l {             width: 200px;             height: 120px;             float: left;             margin-right:10px;             border: 1px solid black;         }          .mid_c {             width: 200px;             height: 120px;             float: left;             border: 1px solid black;             margin-right:10px;         }          .mid_r {             width: 200px;             height: 120px;             float: left;             border: 1px solid black;         }          .bot {             display: inline-block;             clear: both;             margin-bottom: 10px;             border: 1px solid black;         }          .bot_l {             width: 450px;             height: 80px;             float:left;             border: 1px solid black;         }          .bot_r {             width: 200px;             height: 80px;             float: left;             border: 1px solid black;         }     </style> </head> <body>     <div class="main">         <div class="margins">         <div class="top_h"></div>             <div class="mid">          <div class="mid_l"></div>         <div class="mid_c"></div>         <div class="mid_r"></div>                 </div>             <div class="bot">         <div class="bot_l"></div>         <div class="bot_r""></div>                 </div>     </div>    </div> </body> </html> 

here trying create container div(margins) inside main div, gap of 10 px on each side, when view in web browser overlapped. please let me know going wrong.

here fiddle.

thanks

offcourse overlapping. in .main class have set height, , it's not high enough. also, if want absolutely sure nothing goes on div, set overflow in css !


Comments

Popular posts from this blog

php - Magento - Deleted Base url key -

javascript - Tooltipster plugin not firing jquery function when button or any click even occur -

java - WrongTypeOfReturnValue exception thrown when unit testing using mockito -