Divs
Below are various examples of using DIVs to create Multi Colums
Copy and paste the code and adjust the variables to experiment with them.
Floats
When ever you use a DIV with the variable: "Float" then that variable must be Cleared at the end of your code.
There are two ways that you can do this, and the only way to find which works best in your page is to try it.
- ~~~~
- [[div style="clear:right;height:1px;"]] [[/div]]
In example 1, ~~~~ does not work to good effect, yet in example 3 it does.
Example 1
One way of creating multi colums is to use "divs"
Repeating columns :
one
one
one
one
two
two
two
two
three
three
three
three
four
four
four
four
five
five
five
five
six
six
six
six
To get the Second ROW of Colums to display directly under the First ROW you need to use
[[div style="clear:right;height:1px;"]]
Here is the code used to generate the above.
Note that the way the columns are laid out in your wiki code, are dependant on which "float" you use. Also note that the "Clear" DIV needs to be changed.
[[div style="float:right;width:33%;"]]
one
one
one
one
[[/div]]
[[div style="float:right;width:33%;"]]
two
two
two
two
[[/div]]
[[div style="float:right;width:33%;"]]
three
three
three
three
[[/div]]
[[div style="clear:right;height:1px;"]]
[[/div]]
[[div style="float:left;width:33%;"]]
four
four
four
four
[[/div]]
[[div style="float:left;width:33%;"]]
five
five
five
five
[[/div]]
[[div style="float:left;width:33%;"]]
six
six
six
six
[[/div]]
[[div style="clear:left;height:1px;"]]
[[/div]]Example 2
Box 1
Contents of box 1
Box 2
Contents of box 2
Box 3
Contents of box 3
Box 4
Contents of box 4
[[div style="border:solid 1px #999999;width:48%;height:22em;background:#fdf5e6;padding:5px;float:left;margin-bottom:4px"]]
**Box 1**
Contents of box 1
[[/div]]
[[div style="border:solid 1px #ffffff;width:48%;height:22em;background:#ffffff;padding:5px;float:right;margin-bottom:4px"]]
**Box 2**
Contents of box 2
[[/div]]
[[div style="border:solid 1px #ffffff;width:48%;height:24em;background:#ffffff;padding:5px;float:left;margin-bottom:4px;"]]
**Box 3**
Contents of box 3
[[/div]]
[[div style="border:solid 1px #999999;width:48%;height:24em;background:#ffe4e1;padding:5px;float:right;margin-bottom:4px;"]]
**Box 4**
Contents of box 4
[[/div]]
[[div style="clear:left;height:1px;"]]
[[/div]]Example 3
This takes the code from example 2.
Adjusts some of the variables, and inserts tables into the "box"
Note: the "height" Variable can lead to some data not being displayed when the browser window is resized.
| Variables Used: Experiment with | |
|---|---|
| Border colour adjustment | "border:solid 1px #fff; |
| Border width adjustment | width:45%; |
| Border height adjustment | height:35em; |
| Background Colour adjustment | background:#ffffff |
| Padding adjustment | padding:5px |
| Position adjustment | float:left |
| Margin Bottom adjustment | margin-bottom:4px |
| General Information | |
|---|---|
| UID | |
| ID | 2 |
| Continent | e |
| Country | NL |
| Original Name | European parliamentary elections |
| English Name | missing |
| Level | 1 |
| Binding | Yes |
| Shadow election | no |
| Start Date | 38139 |
| End Date | 38148 |
| Election Period | 9 |
| When did the electronic vote cast take place? | Before and during Election Period |
| Available channels | |
|---|---|
| Polling Place | 1 |
| Postal Voting | 1 |
| Counting Machine | 0 |
| Voting Machine | 1 |
| Networked Voting machine | 0 |
| Kiosk Voting | 0 |
| Remote Electronic Voting | 1 |
| Software | missing |
| Main Provider | LogicaCMG |
| User name and Password | 0 |
| TAN | 1 |
| Signature Card | 0 |
| Biometric properties | 0 |
| Other | 0 |
| Statistics | |
|---|---|
| Eligible Voters | 16000 |
| Votes | missing |
| Eligible Electronic Voters | 7196 |
| Electronic Votes | 2253 |
| Turnout Groups | C |
| Turnout | missing |
| Electronic Turnout | missing |
| Anonymity | |
|---|---|
| Separate Machines | 0 |
| Pre-election | 1 |
| Election | 0 |
| Post Casting | 0 |
| Other | missing |
| Comments | Leotine Leober |
Thanks to http://e-voting.wikidot.com/ for use of tables.
[[div style="border:solid 1px #fff;width:45%;height:35em;background:#ffffff;padding:5px;float:left;margin-bottom:4px"]]
||||~ General Information||
|| UID|| ||
|| ID|| 2||
|| Continent|| e||
|| Country|| NL||
|| Original Name|| European parliamentary elections||
|| English Name|| missing||
|| Level|| 1||
|| Binding|| Yes||
|| Shadow election|| no||
|| Start Date|| 38139||
|| End Date|| 38148||
|| Election Period|| 9||
|| When did the electronic vote cast take place?|| Before and during Election Period||
[[/div]]
[[div style="border:solid 1px #fff;width:45%;height:35em;background:#fff;padding:5px;float:left;margin-bottom:4px"]]
||||~ Available channels||
|| Polling Place|| 1||
|| Postal Voting|| 1||
|| Counting Machine|| 0||
|| Voting Machine|| 1||
|| Networked Voting machine|| 0||
|| Kiosk Voting|| 0||
|| Remote Electronic Voting|| 1||
|| Software|| missing||
|| Main Provider|| LogicaCMG||
|| User name and Password|| 0||
|| TAN|| 1||
|| Signature Card|| 0||
|| Biometric properties|| 0||
|| Other|| 0||
[[/div]]
[[div style="border:solid 1px #fff;width:45%;height:20em;background:#fff;padding:5px;float:left;margin-bottom:4px;"]]
||||~ Statistics||
|| Eligible Voters|| 16000||
|| Votes|| missing||
|| Eligible Electronic Voters|| 7196||
|| Electronic Votes|| 2253||
|| Turnout Groups|| C||
|| Turnout|| missing||
|| Electronic Turnout|| missing||
[[/div]]
[[div style="border:solid 1px #fff;width:45%;height:20em;background:#ffffff;padding:5px;float:left;margin-bottom:4px;"]]
||||~ Anonymity||
|| Separate Machines|| 0||
|| Pre-election|| 1||
|| Election|| 0||
|| Post Casting || 0||
|| Other|| missing||
|| Comments|| Leotine Leober||
[[/div]]Thanks, this is much cleaner than tables. Nesting tables inside tables makes text hard to edit.