[Débutant] Aligner deux divs sur une ligne avec inline

**Braz** · 09/03/2006, 10h20

Ma question va sans doute sembler triviale aux vieux routards du CSS.

J'aimerais dans un div 'conteneur', aligner deux divs sur une ligne en utilisant la propriété inline.

Voici ma CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
body &#123;
background-color&#58; #000000;
color&#58; #FFFFFF;
&#125;
 
.header &#123;
margin-top&#58; 1em;
display&#58; inline;
border&#58; solid 2px; 
border-color&#58; white;
&#125;
 
.headerlogo &#123;
margin-top&#58; 1em;	
width&#58; 180px;
&#125;
 
.headercontent &#123;
margin&#58; 1em;
vertical-align&#58; top
&#125;
 
.menu &#123;
margin-top&#58; 1em;
width&#58; 180px;
height&#58; 80%;
background-color&#58; #FFECCE;
border&#58; solid 1px;
border-color &#58; #666666;
&#125;

Voici mon code HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="web/styles/main.css">
	</head>
 
	<body>
		<div class="header">
			<div class="headerlogo">
				<img src="web/images/logos/xxx_noir_small.jpg" alt="Eurosec 2006" />
			</div>
			<div class="headercontent"> 		
		        Sahara
	      	</div>	
		</div>
		<div class="menu">
		<div>
	</body>

et voici le résultat :

**franculo_caoulene** · 09/03/2006, 10h26

Salut,

Posté ce matin : http://www.developpez.net/forums/viewtopic.php?t=468409
Inline ne sert pas vraiment à ça, ça sert à typer des éléments.

**Braz** · 09/03/2006, 10h46

J'avais effectivement vu ce message.
Pour la propriété inline, merci de la précision, je m'acharne depuis hier à essayer de l'utiliser sans succès.

J'ai refait ma css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
body &#123;
background-color&#58; #000000;
color&#58; #FFFFFF;
&#125;
 
.header &#123;
margin-top&#58; 1em;
border&#58; solid 2px; 
border-color&#58; white;
&#125;
 
.headerlogo &#123;
float&#58; left;
margin-top&#58; 1em;	
width&#58; 180px;
border&#58; solid 2px; 
border-color&#58; green;
&#125;
 
.headercontent &#123;
float&#58;none;
margin&#58; 1em;
vertical-align&#58; top;
margin-left&#58; 12em;
border&#58; solid 2px; 
border-color&#58; green;
&#125;
 
.menu &#123;
float&#58;left;
clear&#58; both;
margin-top&#58; 1em;
width&#58; 180px;
height&#58; 80%;
background-color&#58; #FFECCE;
border&#58; solid 1px;
border-color &#58; #666666;
&#125;