28172 sujets

CSS et mise en forme, CSS3

[Résolu] Divs côte à côte

Bonjour,

Après avoir cherché un certain temps sur mon moteur de recherche préféré, je n'ai pas réussi à trouver de solution à mon problème et c'est pourquoi je viens vous enquiquiner ici Smiley biggrin

Comme j'ai souvent du mal à m'expliquer, j'ai fait un dessin ...
Donc voilà ce à quoi je voudrais arriver:
http://packmen.cfun.fr/images/design_desire.bmp
Seulement je n'y arrive pas Smiley sweatdrop : Quand je ne met pas de positionnement, les divs verts se placent les uns sous les autres (normal me direz vous), mais quand je les met en float:left (comme j'ai vu qu'il était conseillé de faire dans la plupart des sites que j'ai trouvé), voici à peu près ce que j'obtiens:
http://packmen.cfun.fr/images/design_obtenu_float.bmp
Et ce petit div vert sur la droite fait drôlement moche, enfin c'est pas du tout ce que je recherche.
J'ai aussi essayé le display:inline mais ça les laisse les uns sous les autres comme quand je ne met rien.
Je ne vois pas du tout comment je peux faire, donc si vous pouviez m'éclairer un peu de votre lumière je vous en serait fortement reconnaissant Smiley cligne

Merci d'avance. AnthoNyme
Modifié par AnthoNyme (18 Aug 2010 - 20:27)
Salut,

sur le principe :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
#content {
	width: 400px;
	overflow: hidden;
	border: 1px solid black;
}
#bleu {
	width: 100px;
	float: right;
	background: blue;
}
.vert {
	width: 100px;
	height: 60px;
	display: inline-block;
	background: green;
	margin: 10px;
}
</style>
</head>
<body>
<div id="content">
	<div id="bleu">
		<p>Lorem Ipsum</p>
		<p>Lorem Ipsum</p>
		<p>Lorem Ipsum</p>
		<p>Lorem Ipsum</p>
		<p>Lorem Ipsum</p>
		<p>Lorem Ipsum</p>
	</div>
	<div class="vert"></div>
	<div class="vert"></div>
	<div class="vert"></div>
	<div class="vert"></div>
	<div class="vert"></div>
	<div class="vert"></div>
	<div class="vert"></div>
	<div class="vert"></div>
	<div class="vert"></div>
	<div class="vert"></div>
	<div class="vert"></div>
	<div class="vert"></div>
</div>
</body>
</html>
Et pour la compatibilité de inline-block : http://covertprestige.info/css/inline-block/
Sujet clos
Aller à