28172 sujets

CSS et mise en forme, CSS3

[résolu] Contenu horizontal ajustable

Bon, je me lance!

J'ai un site avec 3 colonnes. Celle du milieu doit obligatoirement faire 500px, tandis que celle de gauche et de droite doivent s'ajuster avec la largeur de la page, tout en occupant 100% de l'espace de la fenêtre.

#colonne1 {
width: 10%;
height:30px;
float:left;
background:aqua;
}
#colonne2 {
height:30px;
width:500px;
float:left;
background: fuchsia;
}
#colonne3 {
width:10%;
height:30px;
float:left;
background:green;
}

.clearer{
clear:both;
}

<body>
<div id="conteneur">
<div id="colonne1"></div>
<div id="colonne2"></div>
<div id="colonne3"></div>
<hr class="clearer">
</div>
</body>

Le problème est au niveau des width des colonnes 1 et 3. Je ne peux pas mettre vraiment de pourcentage car ce n'est jamais vraiment le même et il faut vraiment que celle-ci s'élargisse pour occuper le reste de l'espace... je suis vraiment bloqué!! Quelqu'un peut m'aider?
Modifié par gablikes (26 Apr 2011 - 15:32)
Salut,

Je savais bien que j'avais déjà eu ce souci...
Solution un peu tarabiscotée Smiley lol
Le seul problème le fond fuchsia ne suit pas mais conteneur avec un bg approprié les autres en transparent et ce doit être réglé ... mouaif

#conteneur {


}

#colonne1 {
width: 50%;
background:aqua;
float:left;
position: relative;
z-index: 10;

}

#sous_colonne1 {
margin-right: 250px;
}

#colonne2 {
width:500px;
background: fuchsia;
left: 50%;
margin-left: -250px;
position: absolute;
z-index: 20;
}

#sous_colonne3 {
margin-left: 250px;
}

#colonne3 {
width:50%;
float:right;
background:green;
position: relative;
z-index: 10;
}

.clearer{
clear:both;
}



<div id="conteneur">
	<div id="colonne1">
		<div id="sous_colonne1">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque dapibus tempus. Phasellus ac nisi at nisl vulputate vehicula ac eu neque. Nulla aliquam eros non nunc iaculis nec suscipit augue pharetra. Nullam vitae diam eget justo malesuada mollis. Donec viverra ante id arcu imperdiet consequat. Pellentesque nibh velit, porta sit amet facilisis ac, bibendum ac urna. Praesent fringilla, erat sed congue accumsan, risus odio fringilla sem, vitae lacinia nulla justo et purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse faucibus, enim ac molestie consectetur, erat mi placerat tellus, vitae vestibulum elit dolor adipiscing orci. In mollis eros non dolor luctus vehicula sed sit amet sapien. Ut posuere metus at ante tristique ullamcorper
		</div>
	</div>
	<div id="colonne3">
		<div id="sous_colonne3">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque dapibus tempus. Phasellus ac nisi at nisl vulputate vehicula ac eu neque. Nulla aliquam eros non nunc iaculis nec suscipit augue pharetra. Nullam vitae diam eget justo malesuada mollis. Donec viverra ante id arcu imperdiet consequat. Pellentesque nibh velit, porta sit amet facilisis ac, bibendum ac urna. Praesent fringilla, erat sed congue accumsan, risus odio fringilla sem, vitae lacinia nulla justo et purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse faucibus, enim ac molestie consectetur, erat mi placerat tellus, vitae vestibulum elit dolor adipiscing orci. In mollis eros non dolor luctus vehicula sed sit amet sapien. Ut posuere metus at ante tristique ullamcorper
		</div>
	</div>
	<div id="colonne2">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque dapibus tempus. Phasellus ac nisi at nisl vulputate vehicula ac eu neque. Nulla aliquam eros non nunc iaculis nec suscipit augue pharetra. Nullam vitae diam eget justo malesuada mollis. Donec viverra ante id arcu imperdiet consequat. Pellentesque nibh velit, porta sit amet facilisis ac, bibendum ac urna. Praesent fringilla, erat sed congue accumsan, risus odio fringilla sem, vitae lacinia nulla justo et purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse faucibus, enim ac molestie consectetur, erat mi placerat tellus, vitae vestibulum elit dolor adipiscing orci. In mollis eros non dolor luctus vehicula sed sit amet sapien. Ut posuere metus at ante tristique ullamcorper
	</div>
</div>
<hr class="clearer">
Super!!!! Je n'en avait seulement que besoin pour une utilisation minime, donc c'est vraiment parfait!

Merci Smiley lol
Sujet clos
Aller à