Witam tworze szablon dla strony dynamicznej i mam problem jak stworzyć następującą tabele w divach?

[HTML] pobierz, plaintext 
<tr>
        <td></td><td rowspan="2"></td>
</tr>
<tr>
        <td></td>
</tr>
[HTML] pobierz, plaintext 

stworzyłem coś takiego:

[HTML] pobierz, plaintext 
<div id="content">
 
     <div class="left_content">
        <div class="cim">Tytul</div>
        <p class="story">tresc</p>      
    </div>    
 
     <div class="left_content">
        <div class="cim">Tytul</div>
        <p class="story">tresc</p>      
    </div>      
 
    <div class="right_content">
        <div class="cim_right">Tytul2</div>
        <p class="story">tresc</p>
    </div>
</div>
 
#content{
    float: left;
    background-color: #070707;
    overflow: hidden;
}
.left_content, .right_content{
    margin: 0px 10px 0px 10px;
}
.left_content{
    float:left;
    width:550px;
}
.right_content{
    float: !important;
    width:160px;
}
.cim{
    background-image: url('../images/left_button.png');
    height:32px;
}
.cim_right{
    background-image: url('../images/right_button.png');
    height:32px;
}
[HTML] pobierz, plaintext 

I wszystko jest ok lecz gdy warstwa left_content jest tylko jedna warstwa right_content pokazuje się pod left_content i aby wtedy było ok musze zamienić float: !important; na float: left;. Pomożecie jak to rozgryźć Bo zawartość jest pobierana z bazy i ilość warstw left_content jest stała i nie wiem jak to zrobić aby było dobrze przy jednej warstwie lub kilku.

zrób to na listach (ul i li)

<div class=lewy 50% storny>
Nagłówek listy (nazwa):
tutaj lista
</div>
<div class=prawy 50% strony>
Nagłówek listy (nazwa):
tutaj lista
</div>

oczywiscie na obu divach float:left;

Pozdrawiam

Dzięki Leci punkcik Temat do zamknięcia