Set the container to position:relative; then set the inner div to position:absolute;
Thanks, unfortunately it had unexpected results. Did not achieve what I needed. Outer div's padding remains while text inside the outer div is now occupying the same space as the absolute inner div and getting obscured. More ideas?
Edit: I am trying your appended solution. Will report back asap.
Nope. Suggestion appreciated, alas it causes disarray.
See that navy div.pathbar "HS Topics > Probability"
It is not sticking to the inner edges of the outer "div.content"
See also that the padding of div.content has an indispensible role in forming margins for text in the same div box so I don't want to do away with it, however I want my div.pathbar to stick to the edges of div.content
PS What do you call the "pathbar" - it's not the official term but that's what I called it for want of the proper term.
I think the normal approach would be to have your .pathbar full widht of .content with a padded container for actual content below that. That would allow for multiple instances of .pathbar (which should really be a heading tag) and related contents.
The cleanest way is to create a second wrapper inside of #content that houses everything BUT your breadcrumb div, then apply your padding to that container rather than #content.
If not that, then you can give every ul, div, h1, h2, h3, h4, h5, and so on left and right padding of 1em, but that would be a bit round about for getting what you need.
You could also stick with the position:absolute approach and just add sufficient top padding to the #content div to allow for your breadcrumb to not overlap your content (you will also have to specify a set height for your breadcrumb rather than the 100% setting that I mentioned earlier). That's also not ideal if your layout changes or your breadcrumb wraps to a second line for any reason.
Bottom line: I'd add that second wrapper and put everything other than your breadcrumb into it and then apply padding there instead.