Mehr Spalten


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.

  1. ~~~~
  2. [[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

From the Snippets site

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]]
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License