Html elements positioned as relative, then moved -15px still take up same physical space

Question

I've got a series of tabs on a page. The tabs are set to relative position. They are then moved 15px to the left. The resulting style looks like this:

style="position:relative;left:-15px" (note that each tab's left is going to be -15 * tab number - so #2 will be -15, #3 is -30, etc.)

This gives the tabs a nice overlapping feel, which is wanted. However, the downside is that the original "width" (without the move to the left) of the tabs is used when centering the table. The result is that the table feels lop-sidded.

Is there anyway to tweak this behavior?

Answer 1

maybe you could add a padding element to the left side. width: #tabs * 15

Answer 2

You could position the tab container: left: (7.5 * tab number)

Answer 3

Instead of nudging the <li>s with 'position: relative', you could apply this to each tab (except for the first tab):

margin-left: -15px;

EDIT: Example of the concept...

<div style="text-align:center;">
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" />
<img style="margin-left: -54px;" src="http://www.google.com/intl/en_ALL/images/logo.gif" />
<img style="margin-left: -54px;" src="http://www.google.com/intl/en_ALL/images/logo.gif" />
<img style="margin-left: -54px;" src="http://www.google.com/intl/en_ALL/images/logo.gif" />
</div>

Answer 4

Set the left margin of the container to -((tabWidth) * (numTabs)) possibly?