Can't use negative margin to expand width of sectionHeaders?

[Jaxel]

This is a general HTML CSS problem...

This is the default...


If I add the following code:

margin: -10px -10px 10px;

It becomes this:


You would think that by adding those margins it would extend the width a total of 20px. Instead it simply moves the margin -10 to the left, and completely fails to extend the margin -10 to the right. Why is this happening and how do I get around this?

You can see this live on my website if you want to tinker with firebug or inspector...
http://www.8wayrun.com/

 

[GofD]

You've got:

padding: 10px 0;

- change it to

padding: 10px;

and it should work.

 

[Jaxel]

You've got:

padding: 10px 0;

- change it to

padding: 10px;

and it should work.

Where do I have this padding?

 

[GofD]

Sorry - it's in the same sectionHeader

.EWRporta_Portal #recentThreads .sectionHeaders {
blah, blah, blah:
padding: 10px 0;
}

Change that to padding: 10px;

 

[Jaxel]

Sorry - it's in the same sectionHeader

.EWRporta_Portal #recentThreads .sectionHeaders {
blah, blah, blah:
padding: 10px 0;
}

Change that to padding: 10px;

That doesn't fix it. Besides, padding wouldn't have anything to do with this issue. The issue is OUTSIDE of the box (margin), not INSIDE of the box (padding).

 

[TazDevilLooney]

Try
margin: -10px 20px 0px -10px;
If you take 10 away you must add a extra 10

 

[Jaxel]

Try
margin: -10px 20px 0px -10px;
If you take 10 away you must add a extra 10

Trust me... I tried all this, none of it fixed it. What I did was remove the padding of the outer container and simply added margins manually to the OTHER objects in the container.

 

[TazDevilLooney]

Im glade you go it sorted out jaxel.