54713cb822859a2c444b68a099338eb586605553
[project/zen.git] / layout.css
1 /*****************************************************
2 *  Layout STYLES 
3 *
4 *  Define CSS classes to implement the Holy Grail Layout
5 *  to create a table-free, 3-column, 2-column, or single column 
6 *  layout depending on whether blocks are enabled in the left 
7 *  or right columns
8 *  more info: 
9 *  http://www.alistapart.com/articles/holygrail/
10 *
11 ******************************************************/
12
13 #main {
14   padding: 10px 10px;    /* main padding */  /* horizontal padding considers border width */
15 }
16
17 #container.withleft #main {
18   margin-left: 199px;
19   voice-family: "\"}\"";
20   voice-family: inherit;
21   margin-left: 200px;
22 }
23
24 #container.withright #main {
25   margin-right: 199px;
26   voice-family: "\"}\"";
27   voice-family: inherit;
28   margin-right: 200px;
29 }
30
31 html>body #container.withleft #main {
32   margin-left: 200px;
33 }
34
35 html>body #container.withright #main {
36   margin-right: 200px;
37 }
38
39 #sidebar-left {
40   float:left;
41   width:180px;
42   padding: 0 10px 0;   /* left-side padding */
43 }
44 #sidebar-right {
45   float:right;
46   width:180px;
47   padding:0 0 0 10px;    /* right-side padding */ /* horizontal padding considers border width */
48 }
49
50 #footer {
51   clear: both;
52 }
53
54 * html body {
55   overflow: hidden;
56 }
57
58 * html #footer-wrapper {
59   width: 100%;
60   padding-bottom: 10010px;
61   margin-bottom: -10000px;
62 }
63
64 /*
65 ** Markup free clearing
66 ** Details: http://www.positioniseverything.net/easyclearing.html
67 */
68 .clear-block:after {
69   content: ".";
70   display: block;
71   height: 0;
72   clear: both;
73   visibility: hidden;
74 }
75
76 .clear-block {
77   display: inline-block;
78 }
79
80 /* Hides from IE-mac \*/
81 * html .clear-block {
82   height: 1%;
83 }
84 .clear-block {
85   display: block;
86 }
87 /* End hide from IE-mac */