Salve a tutti, spero che qualcuno potrà aiutarmi a risolvere il problema che mi sta facendo dannare da diverse settimane.
Ho un layout liquido a due colonne, di cui la prima (div #sinistro flottante a sinistra) ha larghezza fissa a 280px mentre la seconda (div #corpoprinc) si deve espandere a coprire il resto.
titolo (#logo) e #menu si allineano a destra, e sono racchiusi in #barra ad altezza fissa; #menu ha position:absolute per allinearsi verso l'alto quando si ridimensiona la finestra (e non uscire così da #barra).

Con Firefox funziona come vorrei, mentre IExploder mi fa cascare un div sotto l'altro: quando viene ridimensionata la finestra, appena finisce la larghezza per contenere i div (vedi "titolo" in #logo) anziché apparire una barra di scorrimento orizzontale tutto il div #corpoprinc viene riposizionato sotto l'immagine nel div #sinistro.

Il problema si ripresenta, anche senza ridimensionare la finestra, se div #corpo contiene una tabella con width:100% (che non posso evitare di usare, trattandosi di thumbnail per una galleria in php)...

in questo secondo caso devo annidare #corpo in un div con width: 100% ed aggiustare i margini sfalsati, oppure sto sprecando fatica?

Se il doctype è giusto, c'è un modo di risolvere la cosa senza usare larghezze fisse?
ho letto attentamente le guide nella sezione css e mi sono documentato in tutti i più importanti siti che trattano bug di IE e affini: ormai mi sono fatto una cultura in materia ma tutti i metodi che ho tentato non hanno avuto successo.

ho caricato una pagina per lavorarci su all'indirizzo
http://xoomer.alice.it/sssputnik/test.html

ecco il codice html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title>TITOLO</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel='stylesheet' type='text/css' href='styletest.css' />
</head>

<body>

<div id="pagina">

<div id="sinistro">
[img]bigimage.gif[/img]
<div id="servizi">
</div>
</div>

<div id="corpoprinc">

<div id="barra">
<div id="logo">TITOLO
</div>
<div id="menu">
google
yahoo
google
yahoo
google
yahoo
google
yahoo
google
yahoo
</div>
</div>

<div id="corpo">
Benvenuti
</div>

</div>

<div class="clr">
</div>

</div>

</body>
</html>
e questo è il foglio di stile:
html, body {
scrollbar-face-color: #008866;
scrollbar-shadow-color: #772200;
scrollbar-highlight-color: #772200;
scrollbar-3dlight-color: #008866;
scrollbar-darkshadow-color: #772200;
scrollbar-track-color: #bbbbbb;
scrollbar-arrow-color: #772200;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
background-color: #bbbbbb;
color: #772200;
}

#pagina {
float: left;
background-color: #bbbbbb;
height: 92%;
min-width: 640px;
width: auto;
}

*>div#pagina{height:auto; min-height: 92%; width: 100%;}


#sinistro {
float: left;
width: 280px;
background-color: #bbbbbb;
margin-left:0;
margin-top:0;
margin-bottom:0;
margin-right:-3px;
display: inline;
height: 100%;
}

*>div#sinistro{min-height: 100%; height:auto; margin-right: 0;}

#oginok {
max-width: 100%;
border: none;
margin: 0;
}

#servizi {
position: relative;
width: 240px;
top: 10px;
left: 20px;
margin: 0;
}

#corpoprinc {
border: none;
text-align: right;
margin: 0 0 0 -3px;
height: 100%;
min-width: 360px;
width: auto;
display: inline-block;
}

*>div#corpoprinc{min-height: 100%; height:auto; margin-left: 280px;}

#barra {
position: relative;
left: 0px;
height: 196px;
background-color: #008866;
border: none;
text-align: right;
}

#logo {
position: relative;
top: 20px;
margin-right: 30px;
background-color: #008866;
font-family: Impact, Charcoal, sans-serif;
font-size: 70px;
color: #772200;
}

#logo a {
color: #772200;
font-weight: normal;
text-decoration: none;
background-color: #008866;
}

#logo a:hover {
color: #bbbbbb;
font-weight: normal;
text-decoration: none;
background-color: #008866;
}

#menu {
position: absolute;
bottom: 0;
right: 20px;
margin: 20px 0px 20px 20px;
background-color: #008866;
color: #000000;
font-size: 10pt;
font-weight: bold;
text-decoration: none;
}

#menu a {
font-weight: bold;
color: #772200;
text-decoration: none;
padding: 0px 10px 0px 10px;
background-color: #008866;
}

#menu a:hover {
font-weight: bold;
color: #bbbbbb;
text-decoration: none;
padding: 0px 10px 0px 10px;
background-color: #008866;
}

#corpo {
position: relative;
background-color: #bbbbbb;
border: none;
margin-top: 30px;
margin-left: 30px;
margin-right: 30px;
text-align: justify;
font-size: 8pt;
color: #000000;
width: 100%;
}

a:link, a:visited, a:active {
text-decoration: none;
font-weight: bold;
color: #008866;
background-color: #bbbbbb;
}

a:hover {
text-decoration: none;
font-weight: bold;
color: #772200;
background-color: #bbbbbb;
}

img {
border: none;
}

.clr {
clear: both;
}