1 /*-----------------------------------------------------------------------
2 This CSS file is for implementing a 3-column layout based on the
3 "opposite floats" concept. I've seen this concept explained a few
4 times but never as clearly as in the article "3 Column Layouts - A
5 Different Approach" -- (C) 2005, Sebastian Schmieg. The article can be
6 found at: http://www.kingcosmonaut.de/journal/3col-layout/ and is
7 worth your time to go have a read first before diving into the
10 This css file is part of a layout package. Used on its own it won't
11 have the desired effect. The corresponding HTML file should LINK to a
12 filter.css file which will then IMPORT this style sheet (effecively
13 hiding it from IE3, IE4 and NN4). Imported ahead of this file should
14 be one named lpf.css (lpf = Level Playing Field) which attempts to get
15 all the different browsers using the same measurements, including font
18 Not related to the layout but also used in this example is 1 of Stu
19 Nicholls' wonderful creations (somewhat customized). This styles the
20 color boxes with rounded corners used in the content area. The style
21 for this, also imported by filter.css, is cbrc.css and it contains its
24 ======================================================================
25 Copyright and LICENSE -- do not remove --
26 ======================================================================
27 This CSS file is copyrighted (c) 2005, Paul Pomeroy/AdaptiveView
29 see: http://design.adaptiveview.com
31 but free to use under a Creative Commons Attribution 2.5 license.
32 Full details about this license are online at:
34 http://creativecommons.org/licenses/by/2.5/
35 ----------------------------------------------------------------------- */
42 background-color: #fff;
48 html>body, html>body #page {
53 background: url(/Images/TopOfTheWorld.jpg);
55 border-top: 1px solid #306;
56 border-bottom: 1px solid #306;
60 /* max-width: 955px;*/
64 width: expression(document.body.clientWidth < 800? "775px": "100%" ); /* min-width IE style*/
77 background: #2a4c96 url(/Images/Background.jpg);
91 padding-bottom: 4.0em; /* you can get all of the padding set in one line, but Mac IE5.2 has issues with the shorthand method. */
95 width: expression(document.body.clientWidth < 800? "775px" : document.body.clientWidth > 1024? "999px": "99%"); /* IE's version of min- and max-width */
99 * html #page, * html #content {
108 background: transparent;
120 html>body #foot { /* anyone but IE */
126 * html #foot { /* IE */
150 #supporting, #related {
154 * html #supporting, * html #related {
155 overflow:hidden; /* keeps columns from getting pushed down when large font sizes cause words to exceed column width in IE6 */
159 The quick explanation for this layout scheme:
161 You have 3 columns for your content. I call them "main," "supporting" and
162 "related." There are two containers (divs) in which to put these 3 columns,
163 so one container will get 2 columns and the other will get 1. The containers
164 are named "contentWrapper1" and "contentWrapper2." Both of these containers
165 are in a container of their own, called "content." In XHTML, the heirarchy
170 <div id="contentWrapper1">
171 <div id="main"> ... your main content ... </div>
172 </div> <!-- end of contentWrapper1 -->
174 <div id="contentWrapper2">
175 <div id="supporting">
176 ... content supporting main ...
179 ... content related to main ...
181 </div> <!-- end of contentWrapper2 -->
183 </div> <!-- end of content -->
185 NOTE: In the XHTML it doesn't matter which wrapper div is first. Within
186 the wrapper that's containing two content columns (contentWrapper2)
187 it doesn't matter which content comes first. It's fairly easy,
188 therefore, to put your content in any order you want.
190 The content div is alloted 100% width. The two content wrapper divs sit
191 side by side, one floated left, the other floated right. Their combined
192 width must be UNDER 100% (if they're >= 100% then the second wrapper is
193 going to slip down under the first).
195 Within one of the wrappers, it doesn't matter which, you'll have two
196 content divs (again, it doesn't matter which) and one will be floated left
197 and the other right. Their combined widths must also be < 100%.
199 Without touching the XHTML, you can get FOUR arrangements of the three
200 columns by swapping the left and right floats (==> and <== indicate swaps):
202 1. Wrapper 1 Wrapper 2
203 Main Supporting Related
205 2. Wrapper 1 Wrapper 2
206 Main ==> Related Supporting <==
208 3. ==> Wrapper 2 Wrapper 1 <==
209 Related Supporting Main
211 4. Wrapper 2 Wrapper 1
212 ==> Supporting Related <== Main
214 by changing the XHTML so the main content is paired up with one of the
215 others (doesn't matter which) you can get TWO additional layouts in
216 which the main content is flanked by the other two columns:
218 5. Wrapper 1 Wrapper 2
219 Supporting Main Related
221 6. ==> Wrapper 2 Wrapper 1 <==
222 Related ==> Main Supporting <==
224 ******************************
225 ********* HOWEVER **********
226 ******************************
227 I've set this css up to change column arrangements via the class assigned to
228 the body tag. See the HTML file for more information, and below for the css
229 styles used to accomplish this...
238 background:transparent;
270 body.m-sr #contentWrapper1,
271 body.m-rs #contentWrapper1,
272 body.sr-m #contentWrapper1,
273 body.rs-m #contentWrapper1 {
277 body.m-sr #contentWrapper2,
278 body.m-rs #contentWrapper2,
279 body.sr-m #contentWrapper2,
280 body.rs-m #contentWrapper2 {
291 body.m-sr #supporting, body.m-sr #related,
292 body.m-rs #supporting, body.m-rs #related,
293 body.sr-m #supporting, body.sr-m #related,
294 body.rs-m #supporting, body.rs-m #related {
305 body.s-rm #supporting,
306 body.s-mr #supporting,
307 body.rm-s #supporting,
308 body.mr-s #supporting {
312 body.m-sr #contentWrapper1,
313 body.m-rs #contentWrapper1,
314 body.s-mr #contentWrapper1,
315 body.s-rm #contentWrapper1,
316 body.r-ms #contentWrapper1,
317 body.r-sm #contentWrapper1 {
321 body.sr-m #contentWrapper1,
322 body.rs-m #contentWrapper1,
323 body.mr-s #contentWrapper1,
324 body.rm-s #contentWrapper1,
325 body.ms-r #contentWrapper1,
326 body.sm-r #contentWrapper1 {
330 body.m-sr #contentWrapper2,
331 body.m-rs #contentWrapper2,
332 body.s-mr #contentWrapper2,
333 body.s-rm #contentWrapper2,
334 body.r-ms #contentWrapper2,
335 body.r-sm #contentWrapper2 {
339 body.sr-m #contentWrapper2,
340 body.rs-m #contentWrapper2,
341 body.mr-s #contentWrapper2,
342 body.rm-s #contentWrapper2,
343 body.ms-r #contentWrapper2,
344 body.sm-r #contentWrapper2 {
376 body.m-sr #supporting,
377 body.r-sm #supporting,
378 body.sr-m #supporting,
379 body.sm-r #supporting {
383 body.m-rs #supporting,
384 body.r-ms #supporting,
385 body.rs-m #supporting,
386 body.ms-r #supporting {
390 .hide, .filtered {display:none;}
394 margin-bottom: -1px; /* for Gecko-based browsers */
396 padding-bottom: 1px; /* for Gecko-based browsers */
407 .clearfix {display: inline-table;}
409 /* Hides from IE-mac \*/
410 * html .clearfix {height: 1%;}
411 .clearfix {display: block;}
412 /* End hide from IE-mac */