Equal sidebars, longer content

August 19, 2006

Have I ever mentioned how much I love a challenge? I love to play with CSS.

Anyway, there was a question on one of my email lists the other day, and I was sure I could accomplish it. Basically, someone wanted a site layout where it was your basic 3-column thing. Content in the center and two sidebars flanking it. Simple enough. But the trick was – they wanted the two sidebars to always have the same length as each other – no matter which one was the longest. The center content section would have nothing whatsoever to do with the length of the two sidebars. Oh, and no “faux columns” tricks, or javascript to be used.

Could this be done using straight up CSS? I thought so, but I could forsee some problems with it.

Wouldn’t you know it – I was right.

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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="styles.css" />

<style type="text/css">
/*\*//*/
#inner {margin-right:-490px;}
#inner2 {margin-left:-480px;}
/**/
</style>

<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" />
<![endif]-->

<!--[if lte IE 6]>
<link rel="stylesheet" href="ie6.css" />
<![endif]-->

<!--[if lte IE 5.5000]>
<link rel="stylesheet" href="ie5.css" />
<![endif]-->

</head>
<body>
<div id="wrapper">
<!-- this is the outer wrapping container with black border -->

<!-- start center column -->
<div id="center">
<p>text here</p>	<p>text here</p>	<p>text here</p>
<p>text here</p>	<p>text here</p>	<p>text here</p>
<p>text here</p>	<p>text here</p>	<p>text here</p>
<p>text here</p>	<p>text here</p>	<p>text here</p>
<p>text here</p>	<p>text here</p>	<p>text here</p>
<p>text here</p>	<p>text here</p>	<p>text here</p>
<p>text here</p>	<p>text here</p>	<p>text here</p>
</div>
<!-- end center column -->

<div id="outer">
<!-- this is the white background color for the left sidebar, gray 10px border -->

<div id="inner">
<!-- this is the container for the right side.-->

<div id="iefix">

<div id="inner2">
<!-- this is the text positioning for the left sidebar column... -->

<div id="content">
<!-- and this is the text width for the left sidebar -->

<p>Left Content goes here : Left Content goes here : Left Content goes here
: Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
</div></div>

<div id="right">
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<div>
<div class="clearer"></div>
</div>
</div>
<div class="clearer">
</div>
</div>
<div class="clearer">
</div>
</div>
</body>

styles.css

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

* {
	margin:0;
	padding:0;
	border:none;
	z-index:0;
}

body {
	text-align:center;
	background-color:#777;
}

#wrapper {
	width:700px;
	margin:0 auto;
	background-color:#999;
	padding:10px;
	border:solid #000;
	border-width:0 1px 1px 1px;
}

#outer {
	width:200px;
	background:#FFF;
	border:10px solid #CCC;
	float:left;
	text-align:left;
}

#inner {
	background:#FFF;
	float:right;
	width:200px;
	border:10px solid #CCC;
	position:relative;
	margin:-10px -429px -10px 0;
	left:60px;
}

#inner2 {
	float:left;
	width:200px;
	position:relative;
	margin-left:-419px;
	left:-60px;
}

#content {
	width:180px;
	margin:0 auto;
}

#right {
	width:180px;
	margin:0 auto;
}

.clearer{
	height:1px;
	overflow:hidden;
	margin-top:-1px;
	clear:both;
}

#iefix {
	position:relative;
	width:100%;
}

#center {
	text-align:left;
	width:240px;
	padding:10px;
	float:right;
	margin-right:220px;
}

ie7.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

#outer {
	margin-left:-700px;
}

#inner {
	margin-left:210px;
}

#center {
	width:240px;
	float:left;
	margin-left:220px;
}

ie6.css

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

#outer {
	margin-left:-700px;
}

#inner {
	margin-left:210px;
}

#inner2 {
	margin-left:-415px;
}

#center {
	width:230px;
	float:left;
	margin-left:115px;
}

ie5.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

#outer {
	margin-left:-685px;
}

#inner {
	margin-left:229px;
}

#center {
	width:250px;
	float:left;
	margin-left:110px;
}

This is what it looks like.

Now, granted, there are a few limitations. As you can see, the center content column is the same color as the wrapping container. However, if you wanted to change the background color (and put a border) around the center text and make it look like a separate column, you could. Just change it in the #center area of the stylesheet. But the sidebar columns must both remain the same color — background and border colors will remain the same.

This layout was tested on PC: Firefox 1.5, IE 6.0, IE 5.5, IE 5.1, Netscape 7, Opera 7, Opera 8, Opera 9; and on Mac IE 5.2 and Safari 2.0. It was also tested in Mozilla 1.2.1 on PC and Mozilla Firefox 1.0 on Mac — both with the same results: it’s screwed up. Since I don’t have Mozilla 1.0 on my PC, I’m guessing it has the same screwed appearance. But so far, that’s the only browser I have an issue with. Besides, it actually works in freaking IE 5.2 on a Mac! ;)

UPDATE — 8/23/2006 I discovered through other testing that I was wrong about Netscape 7 — it’s funky in that browser. However, I did get some thing changed around, and some new browsers to test in. I can now happily report that, although it’s a bit messed up in Netscape 7.1 on PC, it does work in the following:
On PC: Mozilla 1.7.1, Mozilla Firefox 1.5, Internet Explorer 7 (beta 3), IE 6, Ie 5.5, IE 5.1, Opera 7 (with a *tiny* margin at the bottom of the right column — making it *slightly* shorter than the left column), Opera 8, Opera 9, and Netscape 8.
On Mac: Mozilla Firefox 1.0, Safari 2.0 and Mac IE 5.2.
Now, what needed to be changed was the addition of an extra clearing div in the HTML, and a bit of conditional comments for IE 7. That was it. The above is changed from the original posted, and now reflects those changes, and the example is also replaced with the fixed one.

Enjoy!

Have your say:

* Copy this password:

* Type or paste password here:

1,812 Spam Comments Blocked so far by Spam Free Wordpress