Размещение блоков css

[geroi]

Не Могу разместить блоки чтобе они располагались вот так:

<style>
        * {
vertical-align: top;
                margin: 0;
                padding: 0;
zoom: 1;
        }

</style>

<div style="width:192px;background:#000;">
  <div style="display:inline-block;background:red;width:32px;height:32px"></div>
  <div style="display:inline-block;background:green;width:32px;height:32px">
</div>
  <div style="display:inline-block;background:blue;width:64px;height:64px">
</div>
  <div style="display:inline-block;background:orange;width:32px;height:32px">
</div>
  <div style="display:inline-block;background:orange;width:32px;height:32px">
</div>
  <div style="display:inline-block;background:orange;width:32px;height:32px">
</div>
</div>

А у меня получается только вот так:

Буду очень благодарен за помощь!

Edited August 30, 2011 by geroi

[Gaspode]

Первые четыре блока (которые квадрат составляют) оберните в ещё один блок. Итого будет три блока: эта обёртка, синий блок и крайний правый маленький. Внутри обёртки четыре блока уже как-то раскидывайте. Таблицей проще всего, не хотите таблицей - поковыряйтесь с float.

[geroi]

Спасибо твоя подсказка мне очень помогла, решил задачу таким вот способом:

<style>
#style1 div {
  display:inline-block;
  white-space:nowrap;
  float:left;
}
#style1 div.style3 {
  width:32px;
  height:32px;
  visibility:hidden;
}
#style1 div.style2 {
  height:32px;
  display:block;
  position:static;
}
</style>

<div id="style1">

<div class="style2">    
  <div class="style3"></div>
  <div class="style3"></div>               
  <div style="width:64px;height:64px;"></div>
  <div class="style3""></div>
  <div class="style3"></div>
</div>
<div class="style2">    
  <div class="style3"></div>
  <div class="style3"></div>               
  <div class="style3"></div>
  <div class="style3"></div>
</div>

</div>

Edited August 31, 2011 by geroi