Jak ustawić kilka DIVów obok siebie?

[pakonet]

Post Normanosa o XHTML/CSS2 zainspirował mnie do porzucenia starych technik przygotowywania layoutu strony . Już całkiem nieźle sobie radzę, ale mam tu taki kawałek kodu którego mimo wielu prób nie udało mi się przerobić na CSSy:

<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>



<td>

<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td background="/images/menu-button_01.gif" width="6"><img src="/images/empty.gif" width="6" height="2"></TD>

<td background="/images/menu-button_02.gif" align="center" valign="top"><div style="text-align: center; padding: 1px 2px 2px 2px"><a href="/link1/" class="menulink">Link 1</a></div></TD>

<td background="/images/menu-button_03.gif" width="8"><img src="/images/empty.gif" width="8" height="2"></TD>

</tr>

</table>

</td>



<td>

<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td background="/images/menu-button_01.gif" width="6"><img src="/images/empty.gif" width="6" height="2"></TD>

<td background="/images/menu-button_02.gif" align="center" valign="top"><div style="text-align: center; padding: 1px 2px 2px 2px"><a href="/link2/" class="menulink">Link 2</a></div></TD>

<td background="/images/menu-button_03.gif" width="8"><img src="/images/empty.gif" width="8" height="2"></TD>

</tr>

</table>

</td>



[...]



<td bgcolor="white" width="180"> </td>

</tr>

</table>

Już tłumaczę co to cudo ma robić - są to po prostu graficzne zakładki z linkami ułożone obok siebie:

[Link 1] [Link 2] ...

No i teraz pytanie jak zrezygnować z tych zagnieżdżonych tabelek i zastąpić je DIVami? Nie wiem jak ustawić kilka DIVów obok siebie w jednej linii, tak aby niektóre miały stałą szerokość (obramowanie zakładek) a niektóre dopasowaną do tekstu (część zakładki z linkiem).

Z góry dzięki za wszelką pomoc

-- Edit --

Chciałem zrobić tabelkę w CSSach...

<div style="display: table;">

<div style="display: table-row;">



<div style="display: table-cell; background: url(/images/menu-button_01.gif); width: 6px;"></div>

<div style="display: table-cell; background: url(/images/menu-button_02.gif); padding: 1px 1px 2px 2px;"><a href="#">Link 1</a></div>

<div style="display: table-cell; background: url(/images/menu-button_03.gif); width: 6px;"></div>



<div style="display: table-cell; width: 4px;"></div>



<div style="display: table-cell; background: url(/images/menu-button_01.gif); width: 6px;"></div>

<div style="display: table-cell; background: url(/images/menu-button_02.gif); padding: 1px 1px 2px 2px;"><a href="#">Link 2</a></div>

<div style="display: table-cell; background: url(/images/menu-button_03.gif); width: 6px;"></div>



</div>

</div>

Ale taki kod wyświetla się poprawnie tylko w Firefoxie, w IE już nie...

Z kolei jeśli próbuję ustawić kolejne warstwy obok siebie ustawiając display:inline, to ignorowany jest parametr width...

[nrm]

jak rozpętałem II wojne światową... czyli xhtml

divy ustawiaj float:ami, poszukaj też coś o position: absolute i relative, display: inline.

wybaczcie ale nie mam na tyle czasu aby każdy przypadek analizować z osobna. poza tym w necie jest milion materiałów na ten temat (a ja to niby skąd to biorę?).

w sumie niepowinienem rozmawiac z osobami, które nie przecztały 'a list apart' i 'position is everything' :mrgreen:

do tego polecam jeszcze pl.comp.www gdzie siedzi masa specjalistów.

dobra rada: nie stosuj półśrodków - to sie pożniej mści lepiej poszukac w sieci godzine dłużej a rozwiązać całkowicie problem.

w polskich zasobach jest tego mało, ale w światowych można przebierać.

[pakonet]

Normanos, dzięki za podpowiedzi, poszukam informacji o float i position.

Z ustawianiem inline już próbowałem, niestety przeglądarka wydaje się wtedy ignorować podaną przeze mnie szerokość warstwy (i jeżeli np. mam <div style="display:inline; width: 6px; background: url(...);"></div> to taka warstwa nie jest w ogóle wyświetlana)...

[zYm3N]

specjalistów.

i specjalistek.. ten największy specjalista to kobieta

pozdr.

[nrm]

chyba żartujesz... chyba w gnojeniu i udzielaniu odpowiedzi nie na temat...

EOT.