I'm experiencing a strange behavior that I can't attribute to anything other than perhaps a glitch with a new version?

I'm setting up a site that uses a widget above the main content area. I have done this a million times, only this time the text widget's margins don't push out its containing div as they should

The best way to explain this is to show you (look for a widget containing text "Rather strange behavior...")

Basically, the margins of this div don't push out the containing div outwards, but the adjacent ones do get bumped, so there is weird transparent empty space that should be filled with a background color instead

EDIT: Just realized I shoudl have posted this in the widgets forum. My bad! I'd repost it there, but I don't think the forum has a delete button to get rid of this one

there are several div's involved. Add the following to your CSS to see

#horizontal_custom_widget_area {border: solid 1px red;}
#horizontal_widget {border: solid 1px blue;}
#text-3 {border: solid 1px green;}

then go into FireBug and play with your settings.

Thanks JD, that's how I started out, but I wasn't able to find anything wrong with it

I did fail to mention one thing in my original post - when I add the border to the div tag, the widget "wakes up" and reveals its full size (hence my suspicion something is up with the new release - earlier version didn't do that).

Remove the border and the fill goes AWOL

The last resort will be to add a white border, so at least I have a workaround. It's just that a puzzle like this is something that really tingles my OCD senses and I just can't leave it alone 'till I figure it out :-P

You can even test turning the three borders off in firebug - I left them in there for anyone that likes their OCD senses scratched too

When I looked at the original post it appeared that adding a white background to the header element would fix the issue.

I just re-read the post and margins on a child will not make it's parent div any larger. It may expand beyond the boundarys of the parent but never make the parent bigger.

create a post with the following

<div id="A">
  <div id="B">
    foo
  </div
</div>

tehn add this CSS insert

#A {height: 100px; width: 100px; border: solid 1px red;}
#B {border: solid 1px blue; margin: 20px;}

now go to the single post page in FireFox and use Firebug to increase the margin of #B and see what happens. It will get bigger, but A stays the same size.

@Larry, thanks for your input bro. I tried that, but nada.

@Juggledad, the parent div doesn't have its height set in stone like that example does, so it should resize. In fact, id does resize when a border is applied on a child element (as it currently is).

The worst thing is that I have used this exact same method on a bunch of sites in the past and it worked every time. I'm totally baffled

the parent element width doesn't resize, but the height will. can you show me an example where the width has been resized?