Позиционирование блоков !

[cheatoff-strike]

Помогите с версткой плз... пытаюсь сверстать мониторнг, а проблема вот в чем.

1) Как сделать такую конструкцию <div Нижний блок> <div Top>••War3FT 100lvl New Ra...</div> <div Bot> 46.188.18.78:27016</div> </div> ?? Смысл конструкции в том чтобы текст в блоках обырвался если он привышает ширину допустим в 50пкс. Как это сделать ? В моем случае он просто разширяет блок и все....

2)Как сделать чтобы блок с названием карты и колвом игроков "35hp_2 4 / 32" Находился по верх изображения блока сверху? Я пытался как мог разными способами... но он не как не вставал по верх... только в разные стороны сьезжал вокруг и все.

Меня мучают только эти 2 вопроса и я незнаю как с ними быть =((((

HTML

<div id="header">

<table style="border:1px solid #000000;" width="100%" align="center">

<tbody>

<tr style="border:1px solid #000000;" align="center">

<td>{46.188.18.78:27015}</td><td>{46.188.18.78:27016}</td><td>{46.188.18.78:27017}</td><td>{46.188.18.78:27020}</td><td>{94.45.71.3:27016}</td><td>{94.45.71.3:27017}</td><td></td>

</tr>

</tbody>

</table>

<table style="border:1px solid #000000;" width="100%" align="center">

<tbody>

<tr style="border:1px solid #000000;" align="center">

<td>{46.188.18.78:27015}</td><td>{46.188.18.78:27016}</td><td>{46.188.18.78:27017}</td><td>{46.188.18.78:27020}</td><td>{94.45.71.3:27016}</td><td>{94.45.71.3:27017}</td><td></td>

</tr>

</tbody>

</table>

</div>

Код самого мониторинга (Ксс не получается к нему прикрутить по этому приходится все стили писат внутри)

<div style="color:#fff; text-align:center; width:165px; order:2px solid purple;">

<div>

<div><div style="border:1px solid red;"><a href="#" onclick="getPlayers('{ip}:{port}'); return false;">Список игроков</a><br>

<a href="#" onclick="getSettings('{ip}:{port}'); return false;">Настройки сервера</a></div></div>

<div style="border:1px solid yellow;"><img src="{image}"/><div style="background:;border-top: 1px solid #AAAAAA;color: #EEEEEE;font-size: 11px;height: 14px;margin: 1px;padding: 2px;"><p style="padding:0;margin:0;float:left;">{mapname}</p><p style="padding:0;margin:0;float:right;">{players} / {maxplayers}</p></div></div>

<div style="border:1px solid red;width:100%; height:50px; margin:0 auto; ">{hostname}<br/>{ip}:{port}</div>

</div>

Edited November 25, 2012 by cheatoff-strike

[Vadimka]

1) overflow:hidden у блока внутри которого выезжает текст - скрыват всё что выходит за рамки блока если у него фиксированые размеры!!! иначе просто расширяет его

2) <div>Текст</div><div>картинка</div><div>Название</div> просто поменяй в коде местами)) <div>Текст</div><div>Название</div><div>картинка</div> а если ты про наложение то z-index

Edited November 25, 2012 by Vadimka