28172 sujets

CSS et mise en forme, CSS3

Probleme float

Bonjour,

J'ai une div de contenu dans laquelle j'ai 3 colonnes :

#contenuGauche {
float: left;
width: 200px;
/*background-color: #00FFFF;*/
}

#contenudroit {
float: right;
width: 180px;
}

#contenuCentre {
margin-right: 180px;
margin-left: 200px;
background-color: #FFFF99;
}


J'aimerai aligner 2 images par ligne sur "contenuCentre".

Mais sous IE6 et IE7 cela ne marche pas (jai 3 images dans une ligne), mon clear:left ne marche pas.
J'ai vue que sous IE6 et IE7 le float n'avait pas le meme comportement que sur firefox, Chrome, IE8, mais j'arrive pas à corriger

Pouvez m'aider svp ?

Merci beaucoup,

La page est présente à l'adresse : http://www.direct-football.info/test/artices.html


Mon code :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="reset-min.css" rel="stylesheet" type="text/css" />

<style type="text/css">


#contenuGauche {
	float: left;
	width: 200px;
}

#contenudroit {
	float: right;
	width: 180px;
}

#contenuCentre {
	margin-right: 180px;
	margin-left: 200px;
	background-color: #FFFF99;
}

.clearboth {
	clear: both;
}

.article {
	position: relative;
	float:left;
	height: 200px;
	width: 250px;
	border: 1px solid #000000;

	padding: 10px;
	margin: 15px;
}
.article span {
	position: absolute;
	top: 170px;
	right: 5px;
}

.article img {
	float: right;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}
.article p {
	text-align: justify;
}

.article h2 {
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}
.article a {
	text-decoration: none;
	color: #000000;
}

.clearleft {
clear:left;
}

#les_articles {
	background-color:red;
}

</style>
</head>

<body>


<div id="contenu">
            <div id="contenudroit">
			contenu droit
			</div>
			
            <div id="contenuGauche">
			contenu gauche
			</div>
			
            <div id="contenuCentre">
            	<div id="les_articles">
                    <div class="article">
                    <img src="images/Cage-Foot.jpg" width="100" height="100" alt="Cage Foot" />
                    <h2>titre</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla tellus id libero sollicitudin adipiscing quis nec justo. Donec ac faucibus sem.</p>
                    <span><a href="#">Lisez l'article</a></span>
                    </div>
                    <div class="article">
                    <img src="images/Cage-Foot.jpg" width="100" height="100" alt="Cage Foot" />
                    <h2>titre</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla tellus id libero sollicitudin adipiscing quis nec justo. Donec ac faucibus sem.</p>
                    <span><a href="#">Lisez l'article</a></span>
                    </div>
                    <div class="article clearleft">
                    <img src="images/Cage-Foot.jpg" width="100" height="100" alt="Cage Foot" />
                    <h2>titre</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla tellus id libero sollicitudin adipiscing quis nec justo. Donec ac faucibus sem.</p>
                    <span><a href="#">Lisez l'article</a></span>
                    </div>
                    <div class="article">
                    <img src="images/Cage-Foot.jpg" width="100" height="100" alt="Cage Foot" />
                    <h2>titre</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla tellus id libero sollicitudin adipiscing quis nec justo. Donec ac faucibus sem.</p>
                    <span><a href="#">Lisez l'article</a></span>
                    </div>
            		<div class="clearboth"></div>
        		</div>
			</div>

</div>


</body>
</html>
Sujet clos
Aller à