CSS margin problem

Think that you have a content div whether the content of a website is presented. This div has a margin-top of 20px, because it has to have some margin from the header. There is also a right sidebar. Meaning there is an external div, say whole co开发者_如何学Pythonntent and inside two floating divs next to each other. One for the content, one for the sidebar. Pretty standard.

Now, i suddenly need to add breadcrumbs to the content. Now, the breadcrumbs should not have any margin from the header. The content, however, needs to have 20px top margin independent of whether breadcrumbs are active or not.

Apparantly, i can just make it so that breadcrumbs is on a different div, right on top of the content div. This would need that the content div will now be split into two divs, say 'breadcrumb' and 'main_content'.

This sounds like a bad idea to me, because i reckon that a breadcrumb is actually part of content. Moreover, i would need to change all my templates in order to present them with this new div and general markup change.

I tried to add a top-margin: -20px to the breadcrumb div, but it's not good, because it gets applied to the other content as well.

Any ideas on how to do that in a good way ?

P.S. The sidebar div does not have the same 20px margin, only the main content has that margin, for its internal content.

Does position: relative; top: -20px; work for you?

Give position:relative for main_content div. then you have to apply position:absolute, top:some-px; bottom:some-px as per your requirement.