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.