css - Inner div with margin-top pushes down the outer div -
this question has answer here:
- margin-top push outer div down 6 answers
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
Post a Comment