perfect-stacked-columns.css
Click here to get the file
Size
4.1 kB
-
File type
text/css
File contents
/* <!-- http://matthewjamestaylor.com/blog/perfect-stacked-columns.htm --> */
/* <!-- */
/* header styles */
#header {
clear:left;
float:left;
width:100%;
overflow:hidden;
border-bottom:2px solid #ccc;
border-top:2px solid #ccc;
background:#f4f4f4;
}
#header p,
#header h1,
#header h2 {
clear:left;
float:left;
width:96%;
margin:0;
padding:.4em 2% .1em 2%;
}
/* column container */
.colmask {
clear:both;
float:left;
width:100%;
overflow:hidden;
}
/* common column settings */
.colleft,
.colmid,
.colright {
float:left;
width:100%;
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:.5em 0 1em 0;
overflow:hidden;
}
/* 3 Column settings */
.threecol {
background:#f4f4f4; /* right column background colour */
}
.threecol .colmid {
right:25%; /* width of the right column */
background:#fff; /* center column background colour */
}
.threecol .colleft {
right:50%; /* width of the middle column */
background:#f4f4f4; /* left column background colour */
}
.threecol .col1 {
width:46%; /* width of center column content (column width minus padding on either side) */
left:102%; /* 100% plus left padding of center column */
}
.threecol .col2 {
width:21%; /* Width of left column content (column width minus padding on either side) */
left:31%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
width:21%; /* Width of right column content (column width minus padding on either side) */
left:85%; /* Please make note of the brackets here:
(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}
/* 2 Column (left menu) settings */
.leftmenu {
background:#fff; /* right column background colour */
}
.leftmenu .colleft {
right:75%; /* right column width */
background:#f4f4f4; /* left column background colour */
}
.leftmenu .col1 {
width:71%; /* right column content width */
left:102%; /* 100% plus left column left padding */
}
.leftmenu .col2 {
width:21%; /* left column content width (column width minus left and right padding) */
left:6%; /* (right column left and right padding) plus (left column left padding) */
}
/* 2 Column (right menu) settings */
.rightmenu {
background:#f4f4f4; /* right column background colour */
}
.rightmenu .colleft {
right:25%; /* right column width */
background:#fff; /* left column background colour */
}
.rightmenu .col1 {
width:71%; /* left column content width (left column width minus left and right padding) */
left:27%; /* (right column width) plus (left column left padding) */
}
.rightmenu .col2 {
width:21%; /* right column content width (right column width minus left and right padding) */
left:31%; /* (right column width) plus (left column left and right padding) plus (right column left padding) */
}
/* 2 Column (double page) settings */
.doublepage {
background:#f4f4f4; /* right column background colour */
}
.doublepage .colleft {
right:50%; /* right column width */
background:#fff; /* left column background colour */
}
.doublepage .col1 {
width:46%; /* left column content width (column width minus left and right padding) */
left:52%; /* right column width plus left column left padding */
}
.doublepage .col2 {
width:46%; /* right column content width (column width minus left and right padding) */
left:56%; /* (right column width) plus (left column left and right padding) plus (right column left padding) */
}
/* Full page settings */
.fullpage {
background:#fff; /* page background colour */
}
.fullpage .col1 {
width:96%; /* page width minus left and right padding */
left:2%; /* page left padding */
}
/* Footer styles */
#footer {
clear:both;
padding:1em 2%;
border-top:1px solid #ccc;
}
/* --> */