https://github.com/dfkaye/simple-3-column-css
CSS kata for flexible layout using classes to re-order columns in given markup
https://github.com/dfkaye/simple-3-column-css
Last synced: 3 months ago
JSON representation
CSS kata for flexible layout using classes to re-order columns in given markup
- Host: GitHub
- URL: https://github.com/dfkaye/simple-3-column-css
- Owner: dfkaye
- Created: 2013-04-03T16:42:38.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2013-09-05T21:32:05.000Z (over 11 years ago)
- Last Synced: 2025-01-02T03:46:36.369Z (5 months ago)
- Language: CSS
- Homepage:
- Size: 477 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
simple-3-column-css
===================
A cross-browser flexible 3-column layout CSS plus required HTML.
goal
----
Given one set of markup, one set of CSS, change one CSS class name in the markup to re-order the columns.
example
-------
View the working example
+ The basic layout works fine cross-browser, back to IE6.
+ Nesting 3-col inside another 3-col requires longer (more specific) CSS selectors to override widths, etc.
key factors
-----------
+ Solution requires float-based layouts (plus a clearfix) - makes IE6 harder because of the old "doubled margins
in floated elements" bug we used to love.
+ Columns 1 and 2 need to be wrapped by an "intercolumn" element, with column 3 a sibling after that
(see p. 94, Brian Henick,
[HTML and CSS: The Good Parts](http://www.amazon.com/dp/0596157606), O'Reilly', 2010).
+ Change only the order-{XYZ} class in the "columns" div.
+ Specify actual widths of each column and intercolumn (which contains cols 1 and 2) in a separate
layout-specific or page-specific css file.
given this markup:
-----------------
1. main section
main paragraph
2. more section
more paragraph
3. related section
related paragraph
use this CSS to specify 3-column layout:
---------------------------------------
.columns {
/* set width to contain intercolumn and .col-3 */
}
.intercolumn {
/* contains columns 1 and 2 */
/* set width to contain col-1 and .col-2 */
float: left;
}
.col-1 {
float: left;
}
.col-2 {
float: left;
}
.col-3 {
float: left;
}
.order-132 .intercolumn {
width: auto; /* unset width for non-contiguous case in IE */
float: none;
}
.order-132 .col-2 {
float: right;
}
.order-213 .col-1 {
float: right;
}
.order-231 .intercolumn {
width: auto; /* unset width for non-contiguous case in IE */
float: none;
}
.order-231 .col-1 {
float: right;
}
.order-312 .intercolumn {
float: right;
}
.order-321 .intercolumn {
float: right;
}
.order-321 .col-1 {
float: right;
}
You'll need this for the floated layout clearing problems:
.clearfix {
clear: both;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}