2 blocs div sur la même ligne pose problème

Bonjour,

J'ai 2 blocs <div>. Le html et css est écrit (enfin selon moi mais je me trompe sûrement puisque ça ne marche pas) de façon à ce que les 2 <div> soient sur la même ligne.
Le bloc qui contient "Voici un bloc de test" devrait s'afficher à la droite du 1er bloc puisqu'il a une largeur définie non ??

Pouvez-vous m'aider ?

Merci d'avance

Voici mon code :

<div id="conteneur" style="width:70%;border-style:inset;height:100%;margin-left:auto;margin-right:auto;">
	<div  style="width:280px;border-style:inset;">
		<select size="10" style="width:120px;">
			<option>Une Rubrique 1</option>
			<option>Une Rubrique 2</option>
			<option>Une Rubrique 3</option>
		</select>
		
		<select size="10" style="width:120px;">
			<option>Un article 1</option>
			<option>Un article 2</option>
			<option>Un article 3</option>		
		</select>
	</div>
	
	<div style="background-color:yellow;border-style:inset;">
		Voici un bloc de test
	</div>
</div>

Bonjour,

Les éléments de type bloc (div, p...) s'affichent, de base, toujours l'un en dessous de l'autre, quelque soit leur largeur.

Pour les afficher côte à côte, il y a plusieurs solutions, la plus répendaue étant certainement d'utiliser le positionnement flottant (float).

Je te conseille tout de même, avant de mettre en place quoi que ce soit aveuglément, d'aller fouiller dans la section "Apprendre" du site et d'y lire les guides de survie du positionnement CSS.

Bonjour,
la solution la plus adéquate dans ce cas serait d'attribuer un un display:inline-block aux 2 blocs.

Bonjour,

D'accord merci beaucoup pour la réponse je vais voir du côté des cours

A + tard

Re bonjour,

J'ai encore un petit problème avec la largeur d'un bloc.

J'ai appliqué le flottement à gauche pour un bloc de gauche et j'ai un rendu différent avec internet explorer (IE7) et firefox (3.6.3). La largeur du bloc qui est a droite est plus importante sur internet explorer et je ne sais pas pourquoi. Je pense qu'il y a une histoire de marge. Vous pouvez me donner un coup de main ? voici mon code :

<div style="width:100%;height:200px;border-style:inset;">
			<div style="width:260px;height:180px;border-style:inset;float:left;">
				<select size="10" style="width:120px;">
					<option>Une Rubrique 1</option>
					<option>Une Rubrique 2</option>
					<option>Une Rubrique 3</option>
				</select>
				
				<select size="10" style="width:120px;">
					<option>Un article 1</option>
					<option>Un article 2</option>
					<option>Un article 3</option>		
				</select>
			</div>
			<div style="width:500px;height:180px;border-style:inset;">
				<input type="radio" value=""><img src="image/puce2.gif">
				<input type="radio" value=""><img src="image/puce1.gif">
				<input type="radio" value=""><img src="image/puce0.gif">
				<br>

				<input type="radio">A traiter
				<input type="radio" value="">En cours
				<input type="radio" value="">Terminer
				<br>
				<a href="">Lien</a>
				<div style="width:auto;text-align:center;">
					<input type="submit" value="Agenda">
					<input type="submit" value="Valider">
				</div>
			</div>
		</div>

Merci