Overlapping an image to another section while pushing back the content
Current: http://jsfiddle.net/nmd1abot/
Desired: http://i.imgur.com/64wPw7W.jpg
Basic structure
Section
Header
Body
Graphic
Section
Header
Body
I need help getting the graphic to overlap in the gray section while clicking on the second section heading is larger.
Is there a solution that doesn't require manual installation of the second section gasket?
Probably many other pages I create will use this design, but the image size is not standardized.
+3
source to share
1 answer
http://jsfiddle.net/nmd1abot/2/
Just add
margin-top: -50px;
padding-top: 50px;
to your .two
So basically negative margin-top will push .two
up, but also inner content.
Instead of pulling the content down, the same amount of top-filling will do the job.
+5
source to share