Design en 3 colonnes, bon alignement mais le texte déborde..

Voici mon problème :

http://img381.imageshack.us/img381/7302/printscreen8op2.jpg

HTML

<div id="gauche">
<div id="cadre">
	<p class="text">odozdoopdopqsdoosdojqsdjqsjpdpsodpqspdpjsjpodpqjsdqposdjsiknsdunsdo
sqdoqsdoqsodosqodosqpdpqspdqspdopqspdpspdqsdpposdpqspdpoqsdoqsopdpqspdopqs</p>
</div>
</div>

<div id="droite">
<div id="cadre">
	<p class="text">odozdoopdopqsdoosdojqsdjqsjpdpsodpqspdpjsjpodpqjsdqposdjsiknsdunsdo
sqdoqsdoqsodosqodosqpdpqspdqspdopqspdpspdqsdpposdpqspdpoqsdoqsopdpqspdopqs</p>
</div>
</div>

<div id="centre">
<div id="cadre">
	<p class="text">odozdoopdopqsdoosdojqsdjqsjpdpsodpqspdpjsjpodpqjsdqposdjsiknsdunsdo
sqdoqsdoqsodosqodosqpdpqspdqspdopqspdpspdqsdpposdpqspdpoqsdoqsopdpqspdopqs</p>
</div>
</div>

CSS

/* CORPS, ALIGNEMENTS & COULEURS */

body {
		background: #E6E6E6;
		margin-left : 10%;
		margin-right : 10%;
		margin-top : 40px;
}
#cadre {
		background-color: white;
		border: 1px solid #cdcdcd;
		padding: 10px;
}
#centre {
		overflow: hidden;
		margin-right: 10px;
}
#droite {
		clear: right;
		float: right;
		width: 33%;
}
#footer {
		background: url(img/small-logo.png) no-repeat top left;
		clear : both;
		height: 35px;
		margin-left: 13%;
		margin-top: 10px;
		padding-left: 50px;
		width: 66%;
}
#gauche {
		clear: left;
		float: left;
		margin-right: 10px;
		width: 33%;
}

Problème constaté sous Firefox
Modifié par simon-s (17 Mar 2008 - 21:17)

bonsoir

et avec des vrai mots ?

sinon , overflow:hidden; au pire , pour caché ce qui dépasse.

GC

Erf ouais j'ai pas pensé au fait que c'était tout simplement mon texte qui était en un mot.. Désolé...

simon-s a écrit :
Erf ouais j'ai pas pensé au fait que c'était tout simplement mon texte qui était en un mot.. Désolé...

Le syndrome Supercalifragilisticexpealidocious