3 colonnes dans une section avec bords arrondis

**Oufti** · 31/12/2008, 09h12

Bonjour à tous,

Je ne suis pas du tout un spécialiste un CSS alors soyez indulgent

Je voudrais bien faire ceci 3 colonnes, la gauche et la droite font 180px et celle du milieu contiendra le contenu prinicipal. Le tout est contenu dans un "GlobalBox" qui a les coins arrondis. Jusque la si vous regardez le résultat c'est bon (je n'ai pas joins les images des coins mais c'est ok).

Pour résumer j'ai :
GlobalBox
Header

Content
Header
ColonneGauche
ColonneMilieu
ColonneDroite
Footer.

Le problème que j'ai c'est que lorsque le contenu d'une des colonnes la zone content grandit mais suivant la quantité de texte, elles debordent sur le footer ...

Auriez-vous une idée de comment résoudre ce problème ?

Merci d'avance.

HTML/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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
	<style type="text/css">
	* { margin: 0; padding: 0; border: 0; }
 
	#espace_top_page{
		height: 0px;
	} 
 
	body {
		background: #89573c; 
		color: #FFF; 
		margin: 20px 0 0 0; 
	}
 
	/* GLOBAL BOX */ 
	#GlobalBox {
		width: 1150px;
		min-height: 750px;
		margin: 0 auto;
		color: #000;
		font-family: Tahoma, Arial, Helvetica, FreeSans, sans-serif;
		font-size: 11px;
		border-bottom: 1px solid #e4ddcd; /* Bug firefox 1.0.7 */
		background-repeat: repeat-y;
		background-color: teal;
		background-position: 630px;	
	}
 
 
	#Header {
		position: relative;
		height: 0px;
		background-color: #e4ddcd;
	}
 
	#HeaderLeft {
		position: absolute;
		width: 15px;
		height: 15px;
	   top: 0;
		left: 0;
		background-image: url("global_tl.png");
		background-repeat: no-repeat;
	}
 
	#HeaderRight { 
		position: absolute;
		width: 15px;
		height: 15px;
		top: 0;
		right: 0;
		background-image: url("global_tr.png");
		background-repeat: no-repeat;
	}
 
	#Content {
		float: left;
		width: 1134px;
		min-height: 550px;
		line-height: 16px;
		padding: 16px 0px 16px 16px;
		color: #4b483a;
		font-size: 11px;
		background-color: aqua;	
	}
 
	#ContentHeader {
	background-color: orange;
	height: 50px;
	width: 1118px;
	}
 
	#ContentLeft {
	background-color: blue;
	height: 50px;
	width: 180px;
	float: left;
	}
 
	#ContentRight {
	background-color: red;
	height: 50px;
	width: 180px;
	float: left;
	}
 
	#ContentMiddle {
	background-color: green;
	height: auto;
	width: 758px;
	float: left;
	margin: 0 0 0 0;
	}
 
	#Footer {
	color: black;
		margin: auto;
		text-align: center;
		width: 1150px;
		position: relative;
		height: 15px;
		text-align: center;
		background-color: gray;
		font-size: 12px
	}
 
	#FooterLeft, #FooterRight { position: absolute; width: 15px; height: 15px; top: 0;  }
	#FooterLeft { left: 0; background-image: url(global_bl.png); background-repeat: no-repeat; }
	#FooterRight { right: 0; background-image: url(global_br.png);background-repeat: no-repeat; }
	</style>
</head>
 
<body>
 
	<div id="GlobalBox">
 
		<div id="Header">	   
			<div id="HeaderLeft"></div>
			<div id="HeaderRight"></div>		
		</div>				
 
		<div id="Content">			
			<div id="ContentHeader">header content</div>			
			<div id="ContentLeft">Left content</div>
			<div id="ContentMiddle">
				Middle content					
			</div>
			<div id="ContentRight">right content</div>				
		</div>	
 
	</div>  
 
	<div id="Footer">
		<div id="FooterLeft"></div>
		<div id="FooterRight"></div>
		klkl
	</div>       	
 
</body>

**Bisûnûrs** · 31/12/2008, 09h29

Enlève les height que tu as mis sur ContentLeft et ContentRight, et rajoute un clear:both sur le Footer.

**Oufti** · 31/12/2008, 09h34

Envoyé par Bisûnûrs

Enlève les height que tu as mis sur ContentLeft et ContentRight, et rajoute un clear:both sur le Footer.

Je viens de le faire, pas de changement.

En fait, le footer qui se trouve sous la GlobalBox ne se déplace pas, ou bien c'est la GlobalBox qui ne s'agrandit pas, ou bien la section Content ....

Merci pour ton aide.

**Bisûnûrs** · 31/12/2008, 09h51

Chez moi et avec ces modifications ça fonctionne très bien sur Firefox et IE.
Fais attention quand tu rajoutes le clear:both au Footer, tu n'as pas de point-virgule après le font-size.
Si tu l'avais rajouté et que ça ne corrige pas ton problème, il nous faudrait une page en ligne représentant le problème pour qu'on puisse t'aider correctement.

**Thes32** · 31/12/2008, 10h06

Envoyé par Oufti

Je viens de le faire, pas de changement.

Es tu certain d'avoir modifier le css de cette manière, chez moi aussi ça marche

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
 
#ContentLeft {
	background-color: blue;
	width: 180px;
	float: left;
	}
 
	#ContentRight {
	background-color: red;
	width: 180px;
	float: left;
	}
 
	#Footer {
	        color: black;
		margin: auto;
		text-align: center;
		width: 1150px;
		position: relative;
		height: 15px;
		text-align: center;
		background-color: gray;
		font-size: 12px;
		clear:both
	}

**Oufti** · 31/12/2008, 10h50

Je vous remercie, en effet, il manquait le ;

Merci,

3 colonnes dans une section avec bords arrondis

Tableau en CSS

Discussions similaires

Partager

Partager