[CSS] Pb positionnement

**yAnSoLo82** · 28/12/2005, 10h42

Bonjour,

habitué de la mise en forme avec les tableaux je m'essaye au positionnement via CSS et il y a bien des choses que je n'arrive pas encore à faire

J'aimerais que chaque bloc div à l'intérieur de mon bloc "conteneur" soit positionné les uns en dessous des autres.

le premier div est un bandeau avec une image en fond
le deuxième contient un tableau et se positionne en dessous de mon bandeau
en revanche le troisième se place à droite de mon tableau alors que j'aimerais qu'il se positionne en dessous

si quelqu'un pouvait m'expliquer....
Merci d'avance !!

Voici le code de ma page :

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Visualisation des logs</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script language="JavaScript" type="text/javascript" src="transcoda.js"></script>
 
 
 
</head>
 
<body>
 
<DIV id="conteneur">
 
<DIV class="DBW"><span class="textwhite">Rejets Recensés (Société 0404, DURGC0000338):</span></DIV>
 
<!-- FIN BLOCS LOGS-->
<DIV class="blocLogs">
	<TABLE class="program" align="left">
		<TR>
			<TH class='program' align='left'>Journal</TH>
			<TH class='program' align='left'>Racine GIPS</TH>
			<TH class='program' align='left'>Group d'élements</TH>
			<TH class='program' align='left'>Nature</TH>
 
		</TR>
		<TR>
			<TD>023</TD>
			<TD>XI</TD>
			<TD>ANC</TD>
			<TD>T</TD>
		</TR>
 
		<TR>
			<TD>025</TD>
			<TD>XI</TD>
			<TD>ANC</TD>
			<TD>T</TD>
		</TR>
		<TR>
 
			<TD>037</TD>
			<TD>YG</TD>
			<TD>ANC</TD>
			<TD>T</TD>
		</TR>
		<TR>
			<TD>900</TD>
 
			<TD>YG</TD>
			<TD>AC</TD>
			<TD>T</TD>
		</TR>
		<TR>
			<TD>900</TD>
			<TD>YG</TD>
 
			<TD>ANC</TD>
			<TD>T</TD>
		</TR>
	</TABLE>
</DIV>
<!-- FIN BLOCS LOGS-->
 
<DIV class="DBW"><span class="textwhite">Reste à corriger :</span></DIV>
 
 
</DIV><!-- FIN conteneur -->
</body>
</html>

et une partie de 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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
body {
	margin: 0;
	padding: 0;
	background-color: #FFF;
	font-family: "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
	font-size: 11px;
    color: #3871A9;
    link="#3871A9";
    vlink="#3871A9";
    alink="#FF9900";
    text-align: center;
}
 
.DBW {
    background: url(img/deg_blue_white.gif) left top no-repeat;
    margin : 20px 0px 0px 0px;
    padding-top : 5px;
    padding-left : 5px;
    width: 100%;
    height: 16px;
    text-align: left;
}
 
.textwhite { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; text-decoration: none; vertical-align: middle;}
 
#conteneur {
    position: relative;
    text-align: left;
    margin: 0 auto;
    width: 100%;
}
 
table.program {
        border: 1px dashed #004BA0;
        background-color: #F4F8FB;
        color: #004BA0;
        list-style-type: none;
        font-family: monospace;
        font-size: 11px;
        overflow: auto;
        table-layout: auto;
}
td.program {padding-left: 25px;}
th.program {background-color: #004BA0; color: white;}
th.program_right {
	border-right: 1px dashed #004BA0;
	background-color: #F4F8FB; 
	color: #004BA0; 
	padding: .5em;
}
td.program_left {
	border-left: 1px dashed #004BA0; 
	background-color: #F4F8FB;
    color: #004BA0;
    padding: .5em;
}
 
.blocLogs {margin: 15px 25px;}