Problème CSS div trop étendu

**ThibF** · 27/08/2010, 18h33

Bonjour,
J'ai un petit problème sur la page que je suis en train de créer mais je n'arrive pas à le résoudre.
La page:
http://dapinas.byethost14.com
Vous pouvez voir sur mon site que la colonne centrale s'étend trop et je n'arrive pas à comprendre pourquoi, pouvez-vous m'aider?

voici le code pour cette colonne:

Code css :

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
 
div#content {
	width:auto;
	min-width:250px;
	height:600px;
	margin:0px 290px;
	}
	div#content_top_left {
	float:left;
	width:30px;
	height:30px;
	background-image: url(lefttopcontent.png);
	}
	div#content_top_right {
	float:right;
	width:30px;
	height:30px;
	background-image:url(rightttopcontent.png);
	}
	div#content_top {
	width:100%;
	height:30px;
	background-image:url(middletopcontent.png);
	margin-left:30px;
	margin-right:-30px;
	}
	div#content_middle {
	width:100%;
	height:100%;
	background-color:#AAC8AF;
	margin-left:30px;
	margin-right:-30px;
	color:#336600;
	}
	div#content_middle_left {
	float:left;
	width:30px;
	height:100%;
	background-image: url(left_content.png);
	}
	div#content_middle_right {
	float:right;
	width:30px;
	height:100%;
	background-image:url(right_content.png);
	}
	div#content_bottom_left {
	float:left;
	width:30px;
	height:30px;
	background-image:url(leftbottomcontent.png);
	}
	div#content_bottom_right {
	float:right;
	width:30px;
	height:30px;
	background-image:url(rightbottomcontent.png);
	}
	div#content_bottom {
	width:100%;
	height:30px;
	background-image:url(middlebottomcontent.png);
	margin-left:30px;
	margin-right:30px;
	}

HTML:

Code html :

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
 
<div id="content">
		<div id="content_top_left"></div>
        <div id="content_top_right"></div>
		<div id="content_top"></div>
 
    	<div id="content_middle_left"></div>
        <div id="content_middle_right"></div>
   		<div id="content_middle">
        <?php include('script_page.php'); ?>
        </div>
 
    	<div id="content_bottom_left"></div>
        <div id="content_bottom_right"></div>
    	<div id="content_bottom"></div>
 
</div>

**omar344** · 27/08/2010, 19h38

de quelle étendue tu parles, est ce que c'est verticalement ou longitudinalement??

**tigunn** · 28/08/2010, 18h40

@omar344: les deux sans doute

Sinon, selon moi, le pb viendrais de ton code html (en premier), voici ce qui s'affiche quant on demande la source:

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
<div id="content">
		<div id="content_top_left"></div>
 
        <div id="content_top_right"></div>
		<div id="content_top"></div>
 
    	<div id="content_middle_left"></div>
        <div id="content_middle_right"></div>
   		<div id="content_middle">
        <br />
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<title>Document sans titre</title>
</head>
 
<body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
</head>
 
<body>
<h1>
Qui sommes nous?
<br />
 
</h1>
 
jikjkjkjljlk
<br />
<br />
 
 
</body>
</html>
1
</body>
</html>        </div>
    	<div style="clear: both;">&nbsp;</div>
    	<div id="content_bottom_left"></div>
 
        <div id="content_bottom_right"></div>
    	<div id="content_bottom"></div>
 
</div>

Or il est impossible d'avoir plusieurs <html> <body> <header> sur une seule page. Tu dois avoir un problème d'include (à priori).

**ornitho13** · 28/08/2010, 20h25

le probleme vient de

Code :

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

1
2
3
4
5
6
7
 
div#content {
width:auto;
min-width:250px;
height:600px;
margin:0px 290px;
}

enlève le width:auto

**Mahefasoa** · 30/08/2010, 14h09

Bonjour,

Les directive CSS actuelles dans design.css à la ligne 27 sont:

Code :

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

1
2
3
4
5
6
7
8
 
div#content {
height:600px;
margin:0 290px;
width:100%;
 
 
}

Il suffit d'enlever width:100%;

Code :

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

1
2
3
4
5
6
7
 
div#content {
height:600px;
margin:0 290px;
 
 
}

Bien cordialement,

Problème CSS div trop étendu

CSS

Vue hybride

Discussions similaires

Partager

Partager