blob: 3e5b2e1bb6cb871c0210a829c958cd7d3d51d117 (
plain)
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
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.container {
width: 770px;
}
.column {
float: left;
}
.leftCol {
width: 203px;
}
.mainCol {
margin: 0 4px 0 218px;
width: 366px;
}
.rightCol {
width: 181px;
}
.threeCol .leftCol {
margin-left: -588px;
}
</style>
</head>
<body>
<div style="background:#fcc;">The three columns are floated left. Using a big negative margin, the middle one appears on the left hand side. When the right column is positioned, it should be positioned next to the furthest float across the page, not next to the previous float.</div>
<div class="container">
<div class="threeCol">
<div class="column mainCol">
Blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
</div>
<div class="column leftCol">
Left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
</div>
<div class="column rightCol">
Right right right right right right right right right right
right right right right right right right right right right
right right right right right right right right right right
right right right right right right right right right right
right right right right right right right right right right
right right right right right right right right right right
right right right right right right right right right right
right right right right right right right right right right
right right right right right right right right right right
right right right right right right right right right right
right right right right right right right right right right
right right right right right right right right right right
right right right right right right right right right right
right right right right right right right right right right
right right right right right right right right right right
right right right right right right right right right right
</div>
</div>
<div class="footer">
Footer footer footer footer footer footer footer footer footer
footer footer footer footer footer footer footer footer footer
footer footer footer footer footer footer footer footer footer
footer footer footer footer footer footer footer footer footer
footer footer footer footer footer footer footer footer footer
footer footer footer footer footer footer footer footer footer
footer footer footer footer footer footer footer footer footer
footer footer footer footer footer footer footer footer footer
footer footer footer footer footer footer footer footer footer
footer footer footer footer footer footer footer footer footer
footer footer footer footer footer footer footer footer footer
footer footer footer footer footer footer footer footer footer
footer footer footer footer footer footer footer footer footer
footer footer footer footer footer footer footer footer footer
footer footer footer footer footer footer footer footer footer
footer footer footer footer footer footer footer footer footer
</div>
</div>
</body>
</html>
|
