14c907b11d55e8df00f5650c0040d3b2ac07aed9
[project/zen.git] / STARTERKIT / css / layout-fixed.css
1 /* $Id$ */
2
3 /**
4  * @file
5  * Layout Styling (DIV Positioning)
6  *
7  * Define CSS classes to create a table-free, 3-column, 2-column, or single
8  * column layout depending on whether blocks are enabled in the left or right
9  * columns.
10  *
11  * This layout is based on the Zen Columns layout method.
12  *   http://drupal.org/node/201428
13  *
14  * Only CSS that affects the layout (positioning) of major elements should be
15  * listed here.  Such as:
16  *   display, position, float, clear, width, height, min-width, min-height
17  *   margin, border, padding, overflow
18  */
19
20
21 /*
22  * Body
23  */
24 body {
25 }
26
27 #page-wrapper,
28 #closure-blocks {
29   /*
30    * If you want to make the page a fixed width and centered in the viewport,
31    * this is the standards-compliant way to do that. See also the ie6.css file
32    * for the necessary IE5/IE6quirks hack to center a div.
33    */
34   margin-left: auto;
35   margin-right: auto;
36   width: 960px;
37 }
38
39 #page {
40 }
41
42 /*
43  * Header
44  */
45 #header {
46 }
47
48 #header .section {
49 }
50
51 #search-box {
52 }
53
54 .region-header {
55   clear: both; /* Clear the logo */
56 }
57
58 /*
59  * Main (container for everything else)
60  */
61 #main-wrapper {
62   position: relative;
63 }
64
65 #main {
66 }
67
68 /*
69  * Content
70  */
71 #content,
72 .no-sidebars #content {
73   float: left; /* LTR */
74   width: 960px;
75   margin-left: 0; /* LTR */
76   margin-right: -960px; /* LTR */ /* Negative value of #content's width + left margin. */
77   padding: 0; /* DO NOT CHANGE. Add padding or margin to #content-inner. */
78 }
79
80 .sidebar-first #content {
81   width: 760px;
82   margin-left: 200px; /* LTR */ /* The width of #sidebar-first. */
83   margin-right: -960px; /* LTR */ /* Negative value of #content's width + left margin. */
84 }
85
86 .sidebar-second #content {
87   width: 760px;
88   margin-left: 0; /* LTR */
89   margin-right: -760px; /* LTR */ /* Negative value of #content's width + left margin. */
90 }
91
92 .two-sidebars #content {
93   width: 560px;
94   margin-left: 200px; /* LTR */ /* The width of #sidebar-first */
95   margin-right: -760px; /* LTR */ /* Negative value of #content's width + left margin. */
96 }
97
98 #content-inner {
99   margin: 0;
100   padding: 0;
101 }
102
103 /*
104  * Navbar
105  */
106 #navbar {
107   float: left; /* LTR */
108   width: 100%;
109   margin-left: 0; /* LTR */
110   margin-right: -100%; /* LTR */ /* Negative value of #navbar's width + left margin. */
111   padding: 0; /* DO NOT CHANGE. Add padding or margin to .region-navbar. */
112   height: 2.3em; /* The navbar can have any arbritrary height. We picked one
113                     that is the line-height plus 1em: 1.3 + 1 = 2.3
114                     Set this to the same value as the margin-top below. */
115 }
116
117 .with-navbar #content,
118 .with-navbar #sidebar-first,
119 .with-navbar #sidebar-second {
120   margin-top: 2.3em; /* Set this to the same value as the navbar height above. */
121 }
122
123 .region-navbar {
124 }
125
126 #navbar ul /* Primary and secondary links */ {
127   margin: 0;
128   padding: 0;
129   text-align: left; /* LTR */
130 }
131
132 #navbar li /* A simple method to get navbar links to appear in one line. */ {
133   float: left; /* LTR */
134   padding: 0 10px 0 0; /* LTR */
135 }
136
137 /*
138  * First sidebar
139  */
140 #sidebar-first {
141   float: left; /* LTR */
142   width: 200px;
143   margin-left: 0; /* LTR */
144   margin-right: -200px; /* LTR */ /* Negative value of #sidebar-first's width + left margin. */
145   padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-first-inner. */
146 }
147
148 #sidebar-first-inner {
149   margin: 0 20px 0 0; /* LTR */
150   padding: 0;
151 }
152
153 /*
154  * Second sidebar
155  */
156 #sidebar-second {
157   float: left; /* LTR */
158   width: 200px;
159   margin-left: 760px; /* LTR */ /* Width of content + sidebar-first. */
160   margin-right: -960px; /* LTR */ /* Negative value of #sidebar-second's width + left margin. */
161   padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-second-inner. */
162 }
163
164 #sidebar-second-inner {
165   margin: 0 0 0 20px; /* LTR */
166   padding: 0;
167 }
168
169 /*
170  * Footer
171  */
172 #footer {
173 }
174
175 .region-footer {
176 }
177
178 /*
179  * Closure
180  */
181 #closure-blocks /* See also the #page-wrapper declaration above that this div shares. */ {
182 }
183
184 /*
185  * Prevent overflowing content
186  */
187 #header,
188 #content,
189 #navbar,
190 #sidebar-first,
191 #sidebar-second,
192 #footer,
193 #closure-blocks {
194   overflow: visible;
195   word-wrap: break-word; /* A very nice CSS3 property */
196 }
197
198 #navbar {
199   overflow: hidden; /* May need to be removed if using a dynamic drop-down menu */
200 }
201
202 /*
203  * If a div.clear-block doesn't have any content after it and its bottom edge
204  * touches the bottom of the viewport, Firefox and Safari will mistakenly
205  * place several pixels worth of space between the bottom of the div and the
206  * bottom of the viewport. Uncomment this CSS property to fix this.
207  * Note: with some over-large content, this property might cause scrollbars
208  * to appear on the #page-wrapper div.
209  */
210 /*
211 #page-wrapper {
212   overflow-y: hidden;
213 }
214 */