Hi, Dave here, welcome to my intro and demo of ZXCSS
The base styles ensure cross-browser compatibility and leave you free to concentrate on layout:
<div class="row">
<div class="col">
<div class="inn">
</div>
</div>
</div>
To produce the most robust and responsive layouts add custom classes to the rows, columns and inners as necessary:
.layout-content {width:70%;}
.layout-sidebar {width:30%;}
.layout-main {margin-left:-20px;}
.layout-main .inn {margin-left:20px;padding:20px;background:#eee;}
<div class="row layout-main">
<div class="col layout-content">
<div class="inn">
</div>
</div>
<div class="col layout-menu">
<div class="inn">
</div>
</div>
</div>
Quick styles are for when you want to create a prototype or for web authors with no access to styles.
For example: w1o2 is equivalent to width:50%, w1o4 = 25% etc.
<div class="row layout-main">
<div class="col w1o2">
<div class="inn">
</div>
</div>
<div class="col w1o4">
<div class="inn">
</div>
</div>
<div class="col w1o4">
<div class="inn">
</div>
</div>
</div>
I added placement or position classes in order to provide control over the position of columns independent of source order.
<div class="row layout-main">
<div class="col w1o2 p2o4">
<div class="inn">1
</div>
</div>
<div class="col w1o4 p4o4">
<div class="inn">2
</div>
</div>
<div class="col w1o4 p1o4">
<div class="inn">3
</div>
</div>
</div>
The placement or position classes need applying to all columns in a row to be completely reliable.
Again for prototyping or when a web author has no access to the CSS I added max width and centering classes to give some control over page width and centering.
Div 1. Content: The year 1866 was signalised by a remarkable incident, a mysterious and puzzling phenomenon, which doubtless no one has yet forgotten. Not to mention rumours which agitated the maritime population.
Div 2. Sidebar: For some time past vessels had been met by "an enormous thing," a long object, spindle-shaped, occasionally phosphorescent, and infinitely larger and more rapid in its movements than a whale.
Div 3. Menu: The facts relating to this apparition (entered in various log-books) agreed in most respects as to the shape of the object or creature in question, the untiring rapidity of its movements, its surprising power.
The placement or position classes need applying to all columns in a row to be completely reliable.
Centered 980px max-width page. All columns set 20px gutters, 20px padding and a grey background.
Div 1. The year 1866 was signalised by a remarkable incident, a mysterious and puzzling phenomenon, which doubtless no one has yet forgotten. Not to mention rumours which agitated the maritime population and excited the public mind, even in the interior of continents, seafaring men were particularly excited. Merchants, common sailors, captains of vessels, skippers, both of Europe and America, naval officers of all countries, and the Governments of several States on the two continents, were deeply interested in the matter.
Div 2. For some time past vessels had been met by "an enormous thing," a long object, spindle-shaped, occasionally phosphorescent, and infinitely larger and more rapid in its movements than a whale.
Div 3. The facts relating to this apparition (entered in various log-books) agreed in most respects as to the shape of the object or creature in question, the untiring rapidity of its movements, its surprising power of locomotion, and the peculiar life with which it seemed endowed.
Div 1. Content: The year 1866 was signalised by a remarkable incident, a mysterious and puzzling phenomenon, which doubtless no one has yet forgotten. Not to mention rumours which agitated the maritime population.
Div 2. Sidebar: For some time past vessels had been met by "an enormous thing," a long object, spindle-shaped, occasionally phosphorescent, and infinitely larger and more rapid in its movements than a whale.
Div 3. Sitemap: The facts relating to this apparition (entered in various log-books) agreed in most respects as to the shape of the object or creature in question, the untiring rapidity of its movements, its surprising power.
Centered 980px max-width page. All columns set 20px gutters, 20px padding and a grey background.
Gutters set with: .row {margin-left:-20px;} .inn {margin-left:20px;}
Div 1. The year 1866 was signalised by a remarkable incident, a mysterious and puzzling phenomenon, which doubtless no one has yet forgotten. Not to mention rumours which agitated the maritime population and excited the public mind, even in the interior of continents, seafaring men were particularly excited. Merchants, common sailors, captains of vessels, skippers, both of Europe and America, naval officers of all countries, and the Governments of several States on the two continents, were deeply interested in the matter.
Div 2. For some time past vessels had been met by "an enormous thing," a long object, spindle-shaped, occasionally phosphorescent, and infinitely larger and more rapid in its movements than a whale.
Div 3. The facts relating to this apparition (entered in various log-books) agreed in most respects as to the shape of the object or creature in question, the untiring rapidity of its movements, its surprising power of locomotion, and the peculiar life with which it seemed endowed.
Gutters set with: .row {} .inn {margin-left:20px;} .col-3 .inn {margin-right:0;}
Div 1. The year 1866 was signalised by a remarkable incident, a mysterious and puzzling phenomenon, which doubtless no one has yet forgotten. Not to mention rumours which agitated the maritime population and excited the public mind, even in the interior of continents, seafaring men were particularly excited. Merchants, common sailors, captains of vessels, skippers, both of Europe and America, naval officers of all countries, and the Governments of several States on the two continents, were deeply interested in the matter.
Div 2. For some time past vessels had been met by "an enormous thing," a long object, spindle-shaped, occasionally phosphorescent, and infinitely larger and more rapid in its movements than a whale.
Div 3. The facts relating to this apparition (entered in various log-books) agreed in most respects as to the shape of the object or creature in question, the untiring rapidity of its movements, its surprising power of locomotion, and the peculiar life with which it seemed endowed.
Div 1. Content: The year 1866 was signalised by a remarkable incident, a mysterious and puzzling phenomenon, which doubtless no one has yet forgotten. Not to mention rumours which agitated the maritime population.
Div 2. Sidebar: For some time past vessels had been met by "an enormous thing," a long object, spindle-shaped, occasionally phosphorescent, and infinitely larger and more rapid in its movements than a whale.
Div 3. Sitemap: The facts relating to this apparition (entered in various log-books) agreed in most respects as to the shape of the object or creature in question, the untiring rapidity of its movements, its surprising power.