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