Intégrer le fond.. [Résolu]

[{F-I}]

Bonjour à tous,

Je me demande comment on fait afin que les div "col_gauche" et "col_center" soient intégré DANS le div "container".

J'ai attributé un couleur background au div container mais ce n'est pas pris en compte :

Code HTML :

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="container">
        	<div id="col_gauche">
        		<a href="op1.php">fdgsdfg</a><br />
    			<a href="op2.php">dfgsdfgdfg</a><br /><br /><br /><br /><br /><br />
            	Liste derniers opé :<br />
            	<a href="fich1.php">dsfgsdfgsdgds</a><br />
            	dsfgdgdsgsdg<br />
            	dsfgdgsdgs
    		</div>
            <div id="col_center">
        		col center
        	</div>
    	</div>

Code CSS :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#container {
	width: 1024px;;
	background-color: #E4C29F;
}
 
#col_gauche {
	float: left;
	width: 300px;
	background-color: #FFF;
}
 
#col_center {
	float: right;
	width: 720px;
	background-color: #999;
}

J'aimerais bien afficher un autre couleur du fond de "container" auquel on aura les deux div intérieur.

Merci d'avance

[Bisûnûrs]

Cf la FAQ :
http://css.developpez.com/faq/?page=...ment_flottants

[Atomya Rise]

Le soucis que tu as, c'est que nulle part, le height est défini...
De plus, tu mets un float: right; alors que cela n'est pas nécessaire vu que ta div de gauche possède déjà un float: left;.

Je te propose 2 exemples, sans le float: right; bien sur, afin que tu comprennes mieux.

un exemple avec un height: 300px; sur le container :

Code css :

1
2
3
#container { width: 1024px; height: 300px; background-color: #E4C29F; }
#col_gauche { float: left; width: 300px; background-color: #FFF; }
#col_center { width: 720px; background-color: #999; }

et un autre exemple, sans le height :

Code css :

1
2
3
#container { width: 1024px; background-color: #E4C29F; }
#col_gauche { float: left; width: 300px; background-color: #FFF; }
#col_center { width: 720px; background-color: #999; }

[{F-I}]

Bonjour à vous deux,

Je vous remercie de vos réponses.

Le problème est résolu.

J'ai utilisé la solution d'Atomya Rise en rajutant la div clear.

Bonne journée