Float et Background

Bonjour à tous,

Je suis en train de m'arracher les cheveux depuis un petit moment sur mes CSS. Une erreur qui plus est, sur laquelle j'ai la sensation de systématiquement me prendre le choux.

Je vous explique :

Je souhaiterais créer un bloc article dont la bordure gauche d'environ widht:45px contiendrait la date avec un fond de couleur propre.
Pour cela, je crée un premier div .sidebar et un div .contenu pour l'article.
Sidebar est en float right, contenu en float left. Je souhaiterais que .sidebar s'étire avec mon .contenu. Pour celà je l'ai mis en height: 100% et ai glissé les deux div dans un autre div global.
Mais si mon contenu s'étire correctement, mon div .sidebar lui, ne va pas plus loin que le texte qu'il contient. Je pense que le problème vient du float mais je n'en suis pas certain et n'arrive pas à réparer.

De plus, si j'applique le fond coloré de la sidebar à mon div global... celui-ci ne s'affiche pas si j'applique des fonds dans les div enfants.

Voici mon code :

.group {
padding: 10px;
width: 620px;
}
.barre {
width: 46px;
float: left;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #cb0000),color-stop(1, #ae0000));
}
.art {
float: right;
height: 100%;
width: 574px;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fcfcfd),color-stop(1, #e2e4e5));
}

-----------------------

<div class=group>
	<div class=barre>
		test
	</div>
	<div class=art>
		<h1>Introduction</h1>
		<p>
		Texte
		</p>
	</div>
</div>

Bon j'ai a priori résolu le problème d'un manière un peu moins flexible à mon gout niveau CSS, mais plus clean niveau HTML

Si vous avez d'autres idées, je suis preneur. Au moins, toujours 0 image.

article {
margin: 10px;
width: 620px;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #cb0000),color-stop(1, #ae0000));
}
aside {
width: 46px;
float: left;
}
.art {
margin-left: 46px;
height: 100%;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fcfcfd),color-stop(1, #e2e4e5));
}


--------------


<article>
	<aside>
		<span class=puce>1</span>
	</aside>
	<div class=art>
		<h1>Test</h1>
		<p>
		TEXTE
		</p>
	</div>
</article>

Bonjour,

1/ un flottant sort du flux.
2/ quand tous les fils d'un conteneur sont flottants, ces fils sont tous hors du flux et le conteneur n'a plus de contenu donc plus de dimensions. Le background du conteneur s'applique à un élément qui fait 0 pixel de haut ... pas visible.
3/ Si tu ajoutes overflow: hidden; sur le conteneur, celui-ci a les dimensions correctes. Tu peux alors placer ton background sur le conteneur plutôt que la sidebar (et le background de l'autre flottant devrait recouvrir le background de la sidebar, enfin si tu as pas de transparence ...)
Modifié par Felipe (14 Sep 2010 - 18:31)