[Résolu] Deux blocs : floats qui posent problème

Bonjour à toutes et à tous !

Je me trouve avec un problème que je n'arrive pas à résoudre seul.
Voici mon problème : deux blocs doivent être "alignés". Seulement, en leur appliquand un float:left; pour l'un et un float:right; pour l'autre, un problème d'affichage fait son apparition...

Voici, pour illustrer le problème, un screen : image.

Voici le CSS des blocs 1 et 2 ainsi que le code (x)HTML.

#bloc1 {
	border:1px solid #fcfaf7;
	background:url('./images/sites_recents.png');
	background-repeat:no-repeat;
	width:40%;
	margin-left:40px;
	float:left;
}

#bloc1 ul {
	margin-top:70px
}

#bloc1, #bloc2 ul li {
	list-style-image:url('./images/go.png');
}

#bloc2 {
	border:1px solid #fcfaf7;
	background:url('./images/sites_recents.png');
	background-repeat:no-repeat;
	width:40%;
	float:right;
}

#bloc2 ul {
	margin-top:70px; 
}

<div id="bloc1">
				<ul>
					<li><a href="#">Mon super site Barbie !</a></li>
					<li><a href="#">Tout sur les Pokémons !</a></li>
					<li><a href="#">Comment coder un site moche</a></li>
					<li>YOH !</li>
					<li>Huhu</li><li>Test</li><li>zgerjkzhe</li>
				</ul>
			</div>
			
			<div id="bloc2">

				<ul>
					<li>test</li>
					<li>test</li>
					<li>test</li>
				</ul>
			</div>

J'ai beau retourner le problème dans tous les sens... impossible de trouver la solution !

Merci d'avance à celui ou celle qui voudra bien m'aider.

Bonne soirée, Ioup.
Modifié par Ioup (05 Aug 2008 - 20:40)

Salut,

et où se trouve le bloc central dans le code HTML,, par rapport aux 2 autres?

La structure est comme ceci :

<div id="content">

			<div id="bloc1">
				<ul>
					<li><a href="#">Mon super site Barbie !</a></li>
					<li><a href="#">Tout sur les Pokémons !</a></li>
					<li><a href="#">Comment coder un site moche</a></li>
					<li>YOH !</li>
					<li>Huhu</li><li>Test</li><li>zgerjkzhe</li>
				</ul>
			</div>
			
			<div id="bloc2">

				<ul>
					<li>test</li>
					<li>test</li>
					<li>test</li>
				</ul>
			</div>
		</div>

Et le CSS du content :

#content {
	width:95%;
	margin:auto;
	padding:10px;
	background-color:#fcfaf7;
	border:1px solid #dea303;
	-moz-border-radius:0px 20px;
	margin-top:45px;
}

Hello,

Cela ressemble fortement à un problème de flow (flux). Les éléments mis en float ne font plus parti du flux (tout comme ceux en position:absolute), cela signifie, pour schématiser, qu'ils ne prennent plus de place à l'écran et ne poussent plus les autres blocs pour se faire de la place.
En pratique, on les voit se superposer aux autres.

Pour régler ce problème, la solution la plus courante est de rajouter à l'élement qui est tout de suite après le dernier flottant la règle clear:both;

L'autre solution, que je préfere car elle ne m'oblige pas à rajouter des éléments dans mon code pour clear mes float est de rajouter overflow:hidden; à l'élément qui contient mes floats.
Dans ton cas, c'est #content.

Remarque : overflow:hidden; ne suffit parfois pas sous IE6 qui a ses propres problèmes de layout, dans ce cas un simple zoom:1 sur l'élément parent règle habituellement le problème (dans une feuille de style à part pour IE6 bien sur)

Merci beaucoup Tymlis. Avec overflow:hidden; , tout fonctionne à merveille !
Mon probème est maintenant résolu... je me souviendrai de cette solution.

Merci encore et bonne soirée.