Background-color d'une div container

Bonjour,
voila je souhaite avoir 3div.
La première contient les deux autres. Elle possède dans l'idéale un fond blanc avec opacité.

Le code est le suivant:
Dans la page HTML

<div id="container">
   <div id="content_1">
   </div>
   <div id="content_2">
   </div>
</div>

Dans le css

#container{width:1024px;margin:auto;background-color : rgba(255,255,255,0.5);}
#content_1{width:700px;float:left;}
#content_2{width:260px;float:left;margin-left:60px;}

Dans le cas présent le fond n'apparait pas... il faut que j'écrive en dur la taille de la div dans le css... mais ce n'est pas le but, car la div content_1 récupère des infos dans la base de données et la taille varie donc.

Pourriez-vous m'aider s'il vous plais.

Cordialement

Bonsoir,

Il s'agit d'un comportement normal qu'on appelle le dépassement des flottants. En résumé quand un parent contient des flottants, il "perd" sa hauteur étant donné que ses enfants ont été (partiellement) retirés du flux.

Pour éviter cela, la solution la plus sûre consiste à employer la propriété CSS clear.

HTML :

<div id="container">
	<div id="content_1">Contenu 1</div>
	<div id="content_2">Contenu 2</div>
	[b]<div class="clear"></div>[/b]
</div>

CSS :

body {
	margin: 0;
	padding: 0;
	background-color: #000;
}

[b].clear {
	clear: both;
}[/b]

#container {
	width: 1024px;
	margin: 0 auto;
	background-color: #fff;
	background-color: rgba(255, 255, 255, .5);
}

#container > div {
	float: left;
	background-color: red;
}

#content_1 {
	width: 700px;
	margin-right: 60px;
}

#content_2 {
	width: 260px;
}

Cette solution fonctionne sur tous les navigateurs, mais requiert la présence d'un élément supplémentaire. En oubliant IE7 et IE8, une solution plus élégante revient à créer cet élément via la pseudo-classe :after :

HTML :

<div id="container">
	<div id="content_1">Contenu 1</div>
	<div id="content_2">Contenu 2</div>
	<!-- Plus d'élément supplémentaire ici. -->
</div>

CSS :

/* Identique à l'exemple précédent, en ajoutant la règle suivante : */

#container:after {
	display: block;
	clear: both;
	content: "";
}

Mais le mieux c'est encore d'oublier complètement les flottants et de recourir à la déclaration display: inline-block;, qui permet un résultat similaire sans pour autant sortir les éléments du flux...