28173 sujets

CSS et mise en forme, CSS3

DIV, problème de largeur avec CSS

Bonjour tlm,

j'ai un problème pour la largeur de l'une de mes balises DIV.

Voici mon code css:


/* CSS Document */

.conteneur {
	height: 300px;
	width: 750px;
	border: 1px solid #000066;
	padding: 20px;
	margin-left:auto;
	margin-right:auto;
}

.bloc1 {
	float: left;
	width: 180px;
}
.bloc2 {
	float: left;
	margin-left: 20px;
}
.bloc3 {
	float: right;
	margin-left: 20px;
	width: 180px;

}
.conteneur .bloc1 div {
	border: 1px solid #0066CC;
	margin-bottom:20px;
}
.conteneur .bloc2 div {
	border: 1px dotted #006633;
}
.conteneur .bloc3 div {
	border: 1px solid #006699;
	margin-bottom:20px;
}


Le code HTML :

<!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=iso-8859-1" />
<title>Document sans nom</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="conteneur">
<div class="bloc1">
  <div>Placez ici le contenu de la nouvelle balise Div</div>
  <div>Placez ici le contenu de la nouvelle balise Div</div>
  </div>
<div class="bloc2">
  <div>
    <p>Placez ici le contenu de la nouvelle balise Div</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
  </div>

<div class="bloc3">
  <div>Placez ici le contenu de la nouvelle balise Div</div>
   <div>
     <p>Placez ici le contenu de la nouvelle balise Div</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
    </div>
	 <div>Placez ici le contenu de la nouvelle balise Div</div>
</div>
</div>
</body>
</html>


J'aimerais que le bloc2 occupe la totalité de la largeur restante jusqu'au bloc3 mais sans lui mettre une valeur en pixel, est-ce que c'est possible ?

J'ai essayer en mettant une largeur auto ou meme une marge droite auto mais rien n'y fait.

merci bcp d'avance de m'aider.
salut

pour le bloc 2 tu as mis un float left? pourquoi pas un float: both;? au moins il colle au des non? Smiley biggol
Sujet clos
Aller à