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

Jaxel

Well-known member
This is a general HTML CSS problem...

This is the default...
1.png

If I add the following code:
Code:
margin: -10px -10px 10px;
It becomes this:
2.png

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

Well-known member
You've got:
Code:
padding: 10px 0;
- change it to
Code:
padding: 10px;
and it should work.
 

GofD

Well-known member
Sorry - it's in the same sectionHeader

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

Change that to padding: 10px;
 

Jaxel

Well-known member
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).
 

Jaxel

Well-known member
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.
 
Top