layout deux colonnes float left

**speedy_g** · 16/08/2009, 19h29

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 ?

**Macmillenium** · 16/08/2009, 20h06

Bonjour,

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 xhtml :

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
 
<!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.

**speedy_g** · 16/08/2009, 20h42

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

layout deux colonnes float left

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager