Discussion :

[lelectronique.com]

Bonsoir,

Voilà quelques jours que je galère pour aligner 3 divs pourtant cela parait simple

ce que je souhaite :

======== =========
| | | |
| cadre 1 | | |
| | | |
======== | |
======== | cadre 3 |
| | | |
| cadre 2 | | |
| | | |
======== =========

mon code :

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
40
41
42
43
44
45
46
47
48
49
50
51
 
div#contour_cartouche2 {
	border:#dddddd 1px solid;
	margin-bottom:20px;
}
div#cartouche2 {
	padding: 5px;
}
div#fd_cartouche2{
	background-image:url("/libs/jquery/themes/base/images/ui-bg_gloss-wave_80_ffe400_500x100.png");
	color:#000;
	font-weight:bold;
	background-color:#ffe82b ;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none;
	padding: 2px;
	padding-top:3px;
	background-position:50% 50%;	
	background-repeat:repeat-x;
	font-size:16px;
	height:22px;
	margin:0;
}
 
div#fd_cartouche2 a, div#fd_cartouche2 h2{
	color:#000;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none;
	padding: 2px;
	padding-top:1px;
	font-size:16px;
	height:22px;
	margin:0;
}
 
<div style="width:1000px; margin:auto" id="contour_cartouche2">
  <div id="fd_cartouche2">
    <h2>Actualit&eacute; v&eacute;lo</h2>
  </div>
  <div id="cartouche2">
    <div style="width:460px;display:inline-block; float:left">
      <div style="width:450px; display:block">Actualit&eacute; du jour </div>
      texte </div>
    <br />
    <div style="width:450px; display:block; "> Communiqu&eacute;s de presse v&eacute;lo</div>
      texte </div>
    <div style="width:410px;display:inline-block; float:left;">Magazines V&eacute;lo</div>
      texte </div>
  </div>
</div>

Merci d'avance pour votre aide
bonne soirée
ludo

[lelectronique.com]

lol d'avoir poser la question ici j'ai trouvé la solution
la voici si cela peut aider des personnes

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
 
<div style="width:1000px; margin:auto" id="contour_cartouche2">
  <div id="fd_cartouche2">
    <h2>Actualit&eacute; v&eacute;lo</h2>
  </div>
  <div id="cartouche2">
  <div style="width:410px;display:inline-block; float:right">Magazines V&eacute;lo</div>
 
    <div style="width:460px;display:inline-block; ">
      	<div style="width:450px; display:block">Actualit&eacute; du jour</div>
    	<br />
   		<div style="width:450px; display:block; "> Communiqu&eacute;s de presse v&eacute;lo</div>
    </div>
 
  </div>
</div>

[lelectronique.com]

je réouvre ce sujet car on fait j'ai toujours un petit soucis
j'ai besoin de mettre un tableau dans mon div de droite, pas de soucis sauf que le div principale ne s'arrete pas à la fin du tableau comme prévu mais en plein milieu j'ai une erreur mais où...

[img=http://www.heberger-image.fr/data/vignettes/33522_Capture.jpg]

mon code

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
40
 
<div style="width:1000px; margin:auto" id="contour_cartouche2">
  <div id="fd_cartouche2">
    <h2>Actualit&eacute; v&eacute;lo</h2>
  </div>
  <div id="cartouche2">
  <div style="width:410px;display:inline-block; float:right; border:#000000 1px solid">
 
  <a href="http://www.monde-du-velo.com/actualite-cyclisme/magazine-velo/" style="color:#5c5f5c; font-weight:bold; font-size:14px; text-decoration:none" title="Magazine Vélo"><strong>Magazines V&eacute;lo</strong></a>
    <div style="border-bottom:#5c5f5c 1px solid"></div>
   <table width="300" border="1" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>cel1</td>
    <td>cell5</td>
  </tr>
  <tr>
    <td>cell2</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell3</td>
    <td>cell7</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell8</td>
  </tr>
</table>
 
    <div align="right" style="margin:5px"> <img src="images/fleche-double.gif" width="5" height="5" hspace="3" /><a href="http://www.monde-du-velo.com/actualite-cyclisme/" title="Magazine V&eacute;lo"><strong>Tous les magazines v&eacute;lo</strong></a></div>
  </div>
 
    <div style="width:460px;display:inline-block; ">
      	<div style="width:450px; display:block">Actualit&eacute; du jour</div>
    	<br />
   		<div style="width:450px; display:block; "> Communiqu&eacute;s de presse v&eacute;lo</div>
    </div>
 
  </div>
</div>

[miss_socrates]

Mets ton tableau dans une div (ce n'est pas le cas actuellement) et si ta table fait 300px, ta div doit être juste un peu plus grande pour englober d'éventuelles marges ou padding.

[lelectronique.com]

merci pour ton aide je viens de tester mais cela ne change rien par contre j'ai rajouté cela

Code :

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

1
2
 
 <div id="cartouche2" style="overflow:hidden">

et là cela fonctionne

[mesken]

Pourquoi ne met tu pas ton

Code :

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

overflow:hidden

directement dans la règle de l’identifiant du div