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

java - WrongTypeOfReturnValue exception thrown when unit testing using mockito -

php - Magento - Deleted Base url key -

android - How to disable Button if EditText is empty ? -