layout deux colonnes float left

Bonjour,

J'ai un problème de compréhension d'un layout de type : deux-colonnes ( fixe, fluide).

Je me suis basé sur le lien :
http://www.dynamicdrive.com/style/la...1-fixed-fluid/

Dans celui-ci, le contenant contient une barre de navigation flottante de taille fixe plus un contenu pouvant varier en taille.

Le contenant est de type float et est nécessaire, mais que fait-il exactement ?

Pourriez-vous m'éclairer ?

Bonjour,

Citation:

Envoyé par speedy_g

Le contenant est de type float et est nécessaire, mais que fait-il exactement ?

Tu parles de #contentwrapper ?
En effet, ce n'est plus nécessaire si on code de manière un peu plus logique :

Conférer un nouveau contexte de formatage à #contentwrapper ce qui permet d'occuper le reste de la largeur disponible en tenant compte de l'adjacent flottant.
Conférer le Layout à #contentwrapper sous IE6 est nécessaire pour aboutir à un résultat similaire :

Code:

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
 
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Liquid Layout #2.1- (Fixed-Fluid)</title>
<style type="text/css">
 
body{
margin:0;
padding:0;
line-height: 1.5em;
}
 
b{font-size: 110%;}
em{color: red;}
 
 
#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
 
#topsection h1{
margin: 0;
padding-top: 15px;
}
 
#contentwrapper{
/* float: left;
width: 100%; */
overflow:hidden
}
 
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
background: #C8FC98;
}
 
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
 
#footer a{
color: #FFFF80;
}
 
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
</style>
 
<!--[if lte IE 6]>
	<style type="text/css" media="screen">
		#contentwrapper {  zoom:1 }
	</style>
<![endif]-->
 
 
<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>
 
</head>
<body>
<div id="maincontainer">
 
<div id="topsection"><div class="innertube"><h1>CSS Liquid Layout #2.1- (Fixed-Fluid)</h1></div></div>
 
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b> <script type="text/javascript">filltext(15)</script></div>
 
</div>
 
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b> <script type="text/javascript">filltext(45)</script></div>
</div>
</div>
 
<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>
 
</div>
</body>
</html>

Sinon, on peut attribuer à #contentwrapper un margin-left = largeur de #leftcolumn en remplaçant le overflow:hidden par margin-left:200px;.

Dans ces deux exemples, #leftcolumn devrait être placé avant #contentwrapper.

C'est vrai que comme cela, ca parait déja beaucoup plus logique,

Merci beaucoup pour la réponse détaillée, ca m'a bcp aidé en très peu de temps.

Johan