html - Div inside another div with some padding -
i planning place div inside div padding . face problem top position remains same. how can solve issue
<style type="text/css"> #outdiv { margin: 20px auto 20px auto; width: 1100px; height: 630px; max-height: 100%; background: #1c4675; font-size: 14px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; position:relative; } #outdiv_inner { margin: 10px 5px 10px 5px; width: 1090px; height: 620px; background: #e8e8e8; font-size: 14px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } </style>
<html> <div id="outdiv"> <div id="outdiv_inner"></div> </div> </html>
if wanted blue div appear behind gray one, believe confusing padding
margin
. set padding, same values on #outdiv
:
#outdiv { margin: 20px auto 20px auto; padding: 10px 5px 10px 5px; width: 1100px; height: 630px; max-height: 100%; background: #1c4675; font-size: 14px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; position:relative; } #outdiv_inner { width: 1090px; height: 620px; background: #e8e8e8; font-size: 14px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } </style>
<html> <div id="outdiv"> <div id="outdiv_inner"></div> </div> </html>
of course, if case, use blue "border" on inner div:
#outdiv { margin: 20px auto 20px auto; padding: 10px 5px 10px 5px; width: 1100px; height: 630px; max-height: 100%; background: #1c4675; font-size: 14px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; position:relative; } #outdiv_inner { width: 1090px; height: 620px; background: #e8e8e8; font-size: 14px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; border-top: 10px solid #1c4675; border-bottom: 10px solid #1c4675; border-left: 5px solid #1c4675; border-right: 5px solid #1c4675; }
<div id="outdiv_inner"></div>
Comments
Post a Comment