layout - pomozte prosim

Zdravim, absolutne na to nemuzu prijit a proto zadam o radu. Mam dvousloupcovy layout skladajici se z leveho a praveho sloupce.

Potrebuji nasledujici:

1. Spravne zobrazeni leveho a praveho sloupce.
2. Levy a pravy sloupec oddeleny svislou carou border-right: 1px solid #FFE7C6; .
3. Plovouci vysku pro levy a pravy sloupec v zavislosti na nejvyssim sloupci, aby vzdycky byla lista3 a paticka spojena svislou carou border-right: 1px solid #FFE7C6. Napr. levy sloupec height: 200px a pravy sloupec height: 90px v teto situaci svislou caru u leveho sloupce, pokud by byla vyska opatne, tak i svislou caru opacne.

CSS

#obsah {
width: 750px;
margin: 0 auto;
border:1px solid #FFE7C6;
}
#lista3-null {
width: 100%;
padding: 0;
border: 0;
}
#lista3 {
text-align: left;
padding: 5px;
background-color: #FFE7C6;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#vpravo-null {
width: 190px;
float: right;
padding: 0;
border: 0;
}
#vpravo {
text-align: left;
padding: 10px;
}
#vlevo-null {
width: 560px;
float: left;
padding: 0;
border: 0;
border-right: 1px solid #FFE7C6;
}
#vlevo {
text-align: left;
padding: 10px;
}
#paticka-null {
clear: both;
width: 100%;
padding: 0;
border: 0;
}
#paticka {
padding: 2px;
border-top:1px solid #FFE7C6;
}

HTML

<div id="obsah">
<div id="lista3-null">
<div id="lista3">
Lista3
</div>
</div>
<div id="vlevo-null">
<div id="vlevo">
Levy sloupec = levy a pravy sloupec dela neplechu!!!
</div>
</div>
<div id="vpravo-null">
<div id="vpravo">
Pravy sloupec
</div>
</div>
<div id="paticka-null">
<div id="paticka">
Paticka
</div>
</div>
</div>