Multicolonnage

---

Div

Ci-dessous vous trouverez plusieurs exemples qui décrivent comment utiliser des div pour réaliser du multicolonnage. Vous pouvez copier-coller le code et l’ajuster à vos propres besoins.

Detourage (Float)

Pour faire en sorte que les lignes de textes et les autres objets détourent les bords d’une div ou d’une image vous devez lui attribuer la propriété « float ». Chaque fous que vous avez utilisé cette propriété vous devez l’annuler à la fin de votre code par un des deux moyens ci-dessous. Vous devez essayer pour voir la quelle des deux marche le mieux dans votre cas.

1. ~~~~
2. [[div style="clear:right;height:1px;"]] [[/div]]

Ci-dessous vous trouverez plusieurs exemples qui décrivent comment utiliser des div pour réaliser du multicolonnage. Vous pouvez copier-coller le code et l’ajuster à vos propres besoins.

Dans l’exemple 1, ~~~~ ne marche pas très bien mais dans l’exemple 3 il marche bien.

Exemple 1

Une façon de créer du multicolonnage et d’utiliser des div

Colonnes répétées :

un
un
un

deux
deux
deux

trois
trois
trois

quatre
quatre
quatre

cinq
cinq
cinq

six
six
six

Pour que les colonnes de la deuxième ligne se placent en dessous des 3 premieres vous devez annuler le détourage entre les deux groupes en utilisant :

[[div style="clear:right;height:1px;"]]

Voici le code utilisé pour générer cette structure.
Notez que l’ordre des colonnes dépends du type de détourage (gauche ou droite ), que vous avez choisi.

[[div style="float:right;width:33%;"]]
un
un
un
[[/div]]

[[div style="float:right;width:33%;"]]
deux
deux
deux
[[/div]]

[[div style="float:right;width:33%;"]]
trois
trois
trois
[[/div]]

[[div style="clear:right;height:1px;"]]
[[/div]]

[[div style="float:left;width:33%;"]]
quatre
quatre
quatre
[[/div]]

[[div style="float:left;width:33%;"]]
cinq
cinq
cinq
[[/div]]

[[div style="float:left;width:33%;"]]
six
six
six
[[/div]]

[[div style="clear:right;height:10px;"]]
[[/div]]

Exemple 2

Tiré des pages de Snippets

Boite 1

Contenu de la première boite

Boite 2

Contenu de la seconde boite

Boite 3

Contenu de la troisième boite

Boite 4

Contenu de la quatrième boite

[[div style="border:solid 1px #999999;width:48%;height:12em;background:#fdf5e6;padding:5px;float:left;margin-bottom:4px"]]
**Boite 1**

Contenu de la première boite
[[/div]]
[[div style="border:solid 1px #ffffff;width:48%;height:12em;background:#ffffff;padding:5px;float:right;margin-bottom:4px"]]
**Boite 2**

Contenu de la seconde boite
[[/div]]

[[div style="border:solid 1px #ffffff;width:48%;height:12em;background:#ffffff;padding:5px;float:left;margin-bottom:4px;"]]
**Boite 3**

Contenu de la troisième boite
[[/div]]
[[div style="border:solid 1px #999999;width:48%;height:12em;background:#ffe4e1;padding:5px;float:right;margin-bottom:4px;"]]
**Boite 4**

Contenu de la quatrième boite
[[/div]]

[[div style="clear:right;height:1px;"]]
[[/div]]

Exemple 3

Cet exemple est base sur le précédent, quelques petits ajustements puis l’insertion de tableaux dans chaque cellule.
Notez que le fait de fixer la hauteur peut conduire à la disparition de certaines données lors du rétrécissement de l’écran.

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

Marci à http://e-voting.wikidot.com/ pour avoir utilisé leurs 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]]

	cs
	de
	en
	es
	fi
	fr
	id
	it
	ja
	nl
	pl
	pt
	ro
	ru
	tr
	vi
	zh