problema con testo che sborda

[robo12]

Salve, sto facendo un pò di pratica e ho in una pagina 3 div: un contenitore, uno a destra e uno con il float a sinistra. Questo il codice html

<div id="wrapper">
<div id="left">


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque.</p>
</div>
<div id="content">


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<div class="clearit"> </div>
</div>
</div>


Il codice css è invece cosi:

body {
background: #FFFFFF;
margin: 0px;
padding: 0px;
}

#left {
float: left;
width: 195px;
height: auto;
}

#wrapper {
background: url(../images/bg_image.gif) repeat-y;
margin: 0px auto;
}

#content {
width: 550px;
margin: 0px 0px 0px 205px;
}

.clearit{
clear: both;
}


Ora, se non inserisco quel clear, se nella colonna di sinistra il contenuto è maggiore, il testo sborda. Aggiungendo il clear invece l'immagine di sfondo continua ad essere ripetuta, ma questo solo in firefox, invece in explorer il problema persiste. Qualcuno sa dirmi come si risolve? Grazie.

[index]

IN #WRAPPER mettici un bel height: 100%;
Ciao.

[robo12]

Gracias!