Problema Div css

[rotteninside]

Ciao a tutti, sto provando a impaginare due div, uno dovrebbe essere a destra e l'altro a sinistra.
questo è il codice:

<div id="colonna1">
 .... contenuto ....
</div>
<div id="colonna2">
 .... contenuto ....
</div>

e questo il css:

#colonna1
{
  position:relative;
  padding-top: 1em;
  padding-left:1em;
  padding-right:1em;
  float:left;
  width:6em;
  background-color: #ffffff;
  text-align:left;
  height:20em;
  border-right:solid 2px #ff0000;
}

#colonna2
{	
  position:relative;
  padding-right: 1em;
  padding-left: 1em;
  padding-bottom: 1em;
  margin: 0px 0px 0px 8em;
  background-color: #ffffff;
  padding-top: 1em;
  display:block;
}

Il problema è che la colonna 2 mi finisce sotto alla colonna 1, quindi se il contenuto della colonna 1 è troppo grande mi copre quello della colonna 2.
Qualcuno mi sa dare qualche indicazione su come risolvere questo inconveniente? Ciao e grazie in anticipo.

[Mich_]

Io proverei in questo modo:
- togliere il position: relative; ad ambedue
- mettere float: left; (oppure right) anche alla seconda
- togliere il margin-left alla seconda
- se necessario racchiudere ambedue dentro un contenitore

[rotteninside]

Spettacolo! Già un'altra cosa seguendo il tuo consiglio.
Ho ancora una domanda però, se volessi che la seconda colonna, occupasse esattamente la restante parte di pagina che tipo di atributo devo aggiungere al foglio di stile?

[Mich_]

Questo e` piu` complesso: infatti i browser si comportano in maniera diversa.

Per i browser conformi al W3C, dovrebbe gia` farlo senza altri attributi, ma puoi inserire
width: auto;
Per IE la cosa e` complessa, e credo ci voglia JS oppure attributi HTML.

Prova a vedere nei siti dove ci sono hack per IE (constile o altri segnalati tra i "link utili" - sezione layout)