I just launched a child theme of twentyeleven at http://DigitalGovGroup.com and I'm having trouble using a negative margin in the div #main. Here's an example of what I'm trying to do on the Mailchimp website: http://connect.mailchimp.com/integrations/go-to-meeting.
Right now, I'm achieving the affect of rounded corners and 'bumped up' #main area with an image (which is less than ideal).
I would much rather use this code:
clear:both; margin-top: -30px; -webkit-border-top-left-radius: 9px; -webkit-border-top-right-radius: 9px; -moz-border-radius-topleft: 9px; -moz-border-radius-topright: 9px; border-top-left-radius: 9px; border-top-right-radius: 9px; box-shadow: 0 0 5px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2); -moz-box-shadow: 0 0 5px rgba(0,0,0,0.2); background: #FFF;
The problem is, the negative margin brings the #main area UNDERNEATH the header, not on top of it. Can anyone help me figure out why? Thanks.