Отступы в блоке

[ShiftedReality]

Здраствуйте, есть вот такой фрагмент:

Как сделать отступ от левого края блоков а не от текста? Коды ниже:

HTML:

      <div id = "tab-menu">
        <div id = "pay"></div>
        <div id="right_head"></div>
        <div id="cases">
        <div id="bar_tr"><span style="padding-left: 20px">Left</span><span style="right: 10px; font-weight: bold">97,14</span></div>
        <div id="bar_s"><span style="padding-left: 20px">Left</span><span style="padding-right: 10px; font-weight: bold">97,82</span></div>
        <div id="bar_tr"><span style="padding-left: 20px">Left</span><span style="text-align: right; font-weight: bold">94,02</span></div>
        <div id="bar_s"><span style="padding-left: 20px">Left</span><span style="padding-right: 10px; font-weight: bold">95,19</span></div>
        <div id="bar_tr"><span style="padding-left: 20px">Left</span><span style="padding-left: 100px; font-weight: bold">97,14</span></div>
        </div>
    </div>

Edited July 10, 2011 by ShiftedReality

[psywalker]

<span style="padding-left: 20px;float: left">Left</span>

<span style="right: 10px; font-weight: bold;display: block;">97,14</span>

[web-monster]

Тут бы конечно для начала переверстать грамотно (может списком?)

[ShiftedReality]

Не работает. я пожалуй добавлю только float: right;

Еще вопрос, как сделать выравнивание по вертикали без использования display: table-cell; ?

[psywalker]

Не работает. я пожалуй добавлю только float: right;

Погоди, а покажи скриншоты того, как должно быть и как не должно.

И ещё объясни, отступы должны быть от правого края?

Еще вопрос, как сделать выравнивание по вертикали без использования display: table-cell; ?

line-height, padding ?

[ShiftedReality]

line-height, padding

Поподробнее плиз

Edited July 10, 2011 by ShiftedReality

[psywalker]

ShiftedReality,

Ааа, ну в таких ситуациях (Имхо), нужно делать так.

1) Через UL-LI

2)<li id="bar_tr"><span style=" float: right; font-weight: bold">97,14</span><span style="padding-right: ширина правого спана">Left</span></li>

3) У спанов верхние паддинги делаешь, чтобы отступы выровнять текст. padding-top;

[web-monster]

line-height, padding

Поподробнее плиз

...
<style type="text/css">
ul {
list-style: none;
width: 200px;
}
li { background: red; padding: 10px 0; }
li span { float: right; }
.even { background: yellow; }
</style>
...
	<ul>
		<li class="even">Slots <span>999</span></li>
		<li>Slots <span>999</span></li>
		<li class="even">Slots <span>999</span></li>
	</ul>
...

Может что-то типа этого попробовать?

Edited July 10, 2011 by web-monster

[ShiftedReality]

Ну, В общем у меня в конечном итоге вышло вот так:

<li id="bar_tr"><span style=" float: right; font-weight: bold; padding-top: 5px; padding-right: 10px">97,14</span><span style="padding-left: 20px; padding-top: 5px">Left</span></li>

Но почему-то padding-top: 5px у второго спана не работает

Edited July 10, 2011 by ShiftedReality

[psywalker]

Ну, В общем у меня в конечном итоге вышло вот так:

<li id="bar_tr"><span style=" float: right; font-weight: bold; padding-top: 5px; padding-right: 10px">97,14</span><span style="padding-left: 20px; padding-top: 5px">Left</span></li>

Но почему-то padding-top: 5px у второго спана не работает

Он работает, просто не влияет на верхний и нижний контент. Сделай его блочным.

[ShiftedReality]

Да работает, кульно. Но во втором работает и без дисплея. В чем разница?

[psywalker]

Да работает, кульно. Но во втором работает и без дисплея. В чем разница?

В том, что второму автоматом проставляется блочность, за счёт float;

[ShiftedReality]

Ясно, спасибо за помощь. Можно закрывать

[psywalker]

Ясно, спасибо за помощь. Можно закрывать

Не за что! Тебе спасибо большое А тему закрывать не стоит, вдруг кто нибудь ещё решения предложит.