css - Inner div with margin-top pushes down the outer div -


this question has answer here:

i have 2 divs, 1 inside of other:

<div id="main_content">     <div id="page_title">         <h1>this title of page</h1>     </div>     halo halo halo </div> 

and css:

/****** main ******/ #main_content {     position: relative;     top: -60px;     z-index: 1;     background-color: #ffffff;     width: 1248px;     margin: 0 auto; } /****** end of: main ******/  /****** page title ******/ #page_title {     position: relative;     margin-top: 100px;     background: red url("img.png") no-repeat 50% 50%;     height: 20px;     width: 1300px; } 

the problem when add "margin-top: 100px;" #page_title (the inner div), "pushes down" outer div 100 px, can see body color under it. keep outer div = had no margin @ all. how can achieve this? found overflow:auto should solve (it kinda does) puts outer div lower be. there other way? lot!

replacing margin-top on inner padding-top on outer fix it. putting overflow:hidden or overflow:auto on outer although might cause unnecessary clipping or scroll bars.


Comments

Popular posts from this blog

blackberry 10 - how to add multiple markers on the google map just by url? -

php - guestbook returning database data to flash -

delphi - Dynamic file type icon -