3 columns
There are many ways to see this here, but the most important is that it stays correct in the right way.
There is not much to say about this, except that there is no way back back to the safe environment.
Once upon a time there was a little house in the big wood with all the many elephants.
2 columns
Der er mange modes to see this here, but the most important is that it stays correct in the right way
There is not much to say about this, except that there is no way back back to the safe environment.
Here is the CSS code used in the above
For 3 columns:
.columns3 {
margin: 0px auto;
width: 100%;
}
.columns3 .column1 {
float: left;
padding-right: 2%;
width: 32%;
}
.columns3 .column2 {
float: left;
padding-right: 2%;
width: 32%;
}
.columns3 .column3 {
float: left;
width: 32%;
}
For 2 columns:
.columns2 {
margin: 0px auto;
width: 100%;
}
.columns2 .column1 {
float: left;
padding-right: 2%;
width: 49%;
}
.columns2 .column2 {
float: left;
width: 49%;
}
Remember to clear the floating at the end:
[[div style="clear: both;"]]
Implementation goes something like:
[[div class="columns3"]]
[[div class="column1"]]
There are many ways to see this here, but the most important is that it stays correct in the right way.
[[/div]]
[[div class="column2"]]
There is not much to say about this, except that there is no way back back to the safe environment.
[[/div]]
[[div class="column3"]]
Once upon a time there was a little house in the big wood with all the many elephants.
[[/div]]
[[div style="clear: both;"]][[/div]]
[[/div]]
Calculating the widths of the Columns
It is important that the totals of all width and all padding equates 100% or less.
Personally I find that a spacing between the columns of 2% is fine, but 4% may feel good too. So in the case of three columns and 4%, the widths for the columns3 would be (100-2x4)/3 = 92/3 ~ 30%. So you would loose 2& in total width, or said in another way, the right margin would be total width in pixels * 2 / 100.
Hope this is a help
Carl Friis-Hansen