CSS - COLUMN v.1

============================
======== CSS - COLUMN  v.1 - POSTé
============================

========================================
=========== SPLIT THE RESULTS BETWEEN THE TWO COLUMNS LIKE THIS?
== http://forum.userstyles.org/discussion/35421/multi-column
1 2
3 4
5 6
7 8

Right now it is like this:

1 5
2 6
3 7
4 8

== Yes. Replace the multi-column rules with this:

#results > UL > LI {
  width: -moz-calc(50% - 25px / 2) !important;
  width: -webkit-calc(50% - 25px / 2) !important;
}
#results > UL > LI:nth-child(odd) {
  float:left !important;
  clear:both !important;/**/
  margin-right: 25px !important;
}

========================================
=========== -BREAK : always /  - A LIRE - CSS3 MULTI-COLUMN THRILLER
== http://www.stunningcss3.com/resources/links.html#links7
== Deal-breaker problems with CSS3 multi-columns (with demo) ==http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/
== http://www.stuffandnonsense.co.uk/archives/css3_multi-column_thriller.html

properties which determine where column breaks occur (for example above every <h3>),
column-break-before : always
column-break-inside : avoid

h1 { column-break-before : always }
h2 { column-break-after : avoid }
h1, h2 { column-break-before : always }

but these themselves could have unforseen design issues including the introduction of large amounts of additional white-space or uneven column lengths.


========================================
=========== A LIRE - CSS Swag: Multi-Column Lists
== http://alistapart.com/article/multicolumnlists

== Method 1: Floating list items:
The essential CSS is brief:

  /* allow room for 3 columns */
  ol  {
    width: 30em;
  }
  /* float & allow room for the widest item */
  ol li  {
    float: left;
    width: 10em;
  }
  /* stop the float */
  br  {
    clear: left;
  }
  /* separate the list from subsequent markup */
  div.wrapper  {
    margin-bottom: 1em;
  }

== Method 2: Numbering split lists with HTML attributes :

== Method 3: Numbering split lists with CSS generated content :
ol li  {
    list-style-type: none;
  }
  ol li:before  {
    content: counter(item) ". ";
    counter-increment: item;
  }

== Wrapping a single list with CSS :
== Method 5: Wrapping a single list using absolute positioning :

== METHOD 6: WRAPPING A SINGLE LIST USING NORMAL FLOW (Finally, here’s the technique I prefer to use):



========================================
=========== COLONNES  (column)
== (FR ) http://phollow.fr/2011/10/css-multi-columns/
==http://webdesign.about.com/od/css3/a/css3-multi-columns.htm
==http://webdesign.about.com/od/examples/l/bl-css3-multi-columns-examples.htm#threeColGap
==http://www.w3.org/TR/css3-multicol/
==http://www.w3.org/TR/css3-multicol/#cw
==http://www.netmagazine.com/tutorials/css3-tips


=====================
Il y a 2 façons de créer des colonnes :
- Spécifier un nombre fixe de colonnes à l'aide de la propriété column-count.
- Spécifier la largeur des colonnes à l'aide de column-width (pixels ou ems, mais pas de pourcentage…).
Les 2 propriétés peuvent être cumulées,
mais le navigateur choisira l'une ou l'autre suivant les cas.

Il existe bien sur d'autre propriétés :
Gérer l'espacement entres les colonnes :
- column-gap

Gérer l'apparence de la séparation des colonnes :
- column-rule
- column-rule-width
- column-rule-style
- column-rule-color
Forcer le passage d'un élément sur la colonne suivante. Plus d'infos sur le site du w3c :
 - break-before
 - break-after
 - break-inside
=====================
==== The multi-column model
==http://kmsm.ca/2010/an-almost-complete-guide-to-css3-multi-column-layouts/

Multi-column element needs to have either a defined column width or column count.
Browsers are supposed to render these elements similar to the way they render tables –
but the content in a column layout is dynamically split into blocks.

At the moment, we’re not able to define certain properties about columns (like column-specific backgrounds),
but it’s possible this might change.
- Number and width of columns

column-count
column-width

- column-count :
By default, column-count is set to auto.
This means that if we explicitly define the column-width,
the browser will sort out for itself how many columns are necessary to populate
the content in the multi-column element. Obviously, that’s not always desirable so
we’ll want to explicitly define the number of columns to span the content across.
And it’s easy to do:

#multicolumnElement {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
}

- column-width :
We can define column-width without defining the number of columns,
and the browser will render our content dynamically (there are some fine controls available too
– keep reading for those).
To define column-width, we can use any of the units regularly available to CSS properties (em, px, %, etc).

#multicolumnElement {
	-webkit-column-width: 15em;
	-moz-column-count: 15em;
	column-count: 15em;
}

- Combine column-width and column-count:
#multicolumnElement {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	-webkit-column-width: 15em;
	-moz-column-width: 15em;
	column-width: 15em;
}

- Spanning columns :column-span
If we want an element, say a headline, to span across multiple columns we can make use of the new column-span property.

column-span has 2 possible values:
- all
- regular numbers (e.g. 1,2,3).
Defining column-span as all means that the given element will span across
the whole multi-column block, while assigning it a regular number will limit its span to that number of columns:

h2 {
	-webkit-column-span:all;
	-moz-column-span:all;
	column-span:all;
}

h3{
	-webkit-column-span:2;
	-moz-column-span:2;
	column-span:2;
}

- Filling columns :column-fill (firebug dit pas valide???)
Some finer control over how columns are filled with content.
We can either define 2 values :
- auto
- balanced.
 The former will sequentially fill columns with content,
 while the latter evenly distributes the content.

#multicolumnElement {
	-webkit-column-fill:auto;
	-moz-column-fill:auto;
	column-fill:auto;
}


=====================
==== Column breaks
==http://kmsm.ca/2010/an-almost-complete-guide-to-css3-multi-column-layouts/
What if I want to break the column before an h3 tag, you ask?
Well, that’s easy too.
CSS3 gives us the column-break property with a number of possible related properties and values,
including:
auto, always, avoid, left, right, page, column, avoid-page, and avoid-column.
column-break
So if we want to break the content before every h3 tag
we simply include the column-break-before property in our stylesheet:

h2 {
	-webkit-column-break-before:always;
	-moz-column-break-before:always;
	column-break-before:always;
}

==== COLUMUN : break-after / break-inside
== https://developer.mozilla.org/en-US/docs/CSS/break-before
== http://www.quackit.com/css/css3/properties/css_break-inside.cfm
==https://www.google.com/search?num=100&hl=en&safe=off&client=firefox-a&hs=8fG&tbo=d&rls=org.mozilla%3Afr%3Aofficial&q=column-rule+break-before&oq=column-rule+break-before&gs_l=serp.3...1291790.1293071.0.1293588.2.2.0.0.0.0.360.466.0j1j0j1.2.0.les%3B..0.0...1c.1.kBLQNSSuz4M
=====================
CSS break-after :
Allows you to force a break on multi-column layouts.
More specifically, it allows you to force a break after an element.
It allows you to determine if a break should occur, and what type of break it should be.

Syntax: 	break-before: auto | always | avoid | left | right | page | column | avoid-page | avoid-column;
Example :

break-after: column; /* W3C */
-webkit-column-break-after: column; /* Safari & Chrome */
-moz-column-break-after: column; /* Firefox */
-ms-column-break-after: column; /* Internet Explorer */
-o-column-break-after: column; /* Opera */
=====================
CSS break-inside :
Allows you to prevent an unwanted break within a multi-column layout.
For example, when working with multi-column layouts, you might prefer ordered lists to display within one column
(instead of spilling over to the next column part-way through the list).
In this case, you could use the break-inside property to avoid this unwanted break.

Syntax: 	break-inside: auto | avoid | avoid-page | avoid-column;
Example

break-inside: avoid; /* W3C */
-webkit-column-break-inside: avoid; /* Safari & Chrome */
-moz-column-break-inside: avoid; /* Firefox */
-ms-column-break-inside: avoid; /* Internet Explorer */
-o-column-break-inside: avoid; /* Opera */


=====================
==column-count :
 Définit le nombre de colonnes
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
=====================
==column-width :
 Définit la largeur de chaque colonne(Defines the width of each column)
  -moz-column-width: 100px;
  -webkit-column-width: 100px;
  column-width: 100px;
=====================
==column-min-width :
 Définit la largeur minimale de chaque colonne (Defines the minimum width of each column)
=====================
==column-width-policy :
 Définit si la largeur des colonnes sont souples ou strictes quand il ya un espace supplémentaire
=====================
==column-gap :
 Définit la largeur de l'espace entre les colonnes
  -moz-column-gap: 30px;
  -webkit-column-gap: 30px;
  column-gap: 30px;
=====================
==column-rule :
 Définit la largeur, le style et la couleur de la ligne entre les colonnes
=====================
==column-rule-color :
 Définit la couleur de la ligne entre les colonnes
=====================
==column-rule-style :
 Définit le style (solide, en pointillé, en pointillé, etc) de la ligne entre les colonnes
  -moz-column-rule: 1px solid black;
  -webkit-column-rule: 1px solid black;
  column-rule: 1px solid black;
=====================
==column-rule-width :
 Définit la largeur de la ligne entre les colonnes
=====================
==column-span :
 Définit le nombre de colonnes qu'un élément put chapeauter
(Defines the number of columns an element inside the colmns should span )
  -moz-column-span: 3;
  -webkit-column-span: 3;
  column-span: 3;
============================
=========== COLONNES (column) === -moz-column-rule
== https://developer.mozilla.org/en/CSS/-moz-column-rule
============================
=========== COLONNES - page break after
==http://www.w3schools.com/cssref/pr_print_pageba.asp
  Value	Description
auto	Default. Insert a page break after the element if necessary
always	Insert a page break after the element
avoid	Avoid inserting a page break after the element
left	Insert page breaks after the element until it reaches a blank left page
right	Insert page breaks after the element until it reaches a blank right page
inherit	Specifies that the value of the page-break-after property should be inherited from the parent element
============================
=========== COLONNES - SCROLL - overflow x/y
==http://webdesign.about.com/sitesearch.htm?q=overflow-y&SUName=webdesign
    overflow-x: hidden !important;
    overflow-y: scroll !important;
============================
=========== COLONNES - display:table-cell
COLONNES même hauteur.
 ==http://www.blog-and-blues.org/weblog/2004/09/24/304-des-colonnes-de-meme-hauteurs-en-css
 ==http://www.test.blog-and-blues.org/colonnes/trois/
 ==http://forum.alsacreations.com/topic.php?fid=4&tid=5623&p=1
============================
=========== COLONNES - Vendors === -Webkit-column....
 Si la liste a une demi-douzaine d'articles ou plus, vous serez bientôt perdre beaucoup d'espace sur l'écran.
 Mais appliquer une classe à la liste et d'utiliser les CSS suivante et la liste s'affichera sur deux colonnes:
. TwoColumnList  {
     width: 40em;
    -webkit-column-count: 2;
    -webkit-column-gap: 1em;
    -moz-column-count: 2;
    -moz-column-gap: 1em;
}
Une largeur est définie et la colonne de comptage et column-gap automatiquement des propriétés diviser l'espace
 et la position éléments de la liste. Notez que les préfixes-webkit-et-moz-sont utilisés ici. À long terme,
 ils seront abandonnés; actuellement, cependant, ils sont tenus de faire ces propriétés dans Safari et Firefox respectivement.


============================
=========== COLONNES - COLUMN : -moz-column-count / -moz-column-gap / -moz-column-width
== exemple perso IAFAD :
 #ps dl {
    -moz-column-count: 5 !important;
    -moz-column-gap: 24px !important;
    -moz-column-width: 250px !important;
    display: inline-block !important;
    font-size: 0.75em !important;
    height: 670px !important;
    overflow-y: scroll;
    width: 1900px !important;
}

============================
=========== COLONNES - COLUMN : -moz-column-count / -moz-column-gap / -moz-column-width / -moz-column-rule / -moz-column-span
#comments {
    -moz-column-gap: 24px !important;
    -moz-column-width: 350px !important;
    display: inline-block !important;
    font-size: 0.75em !important;
    height: 350px !important;
    overflow-y: scroll;
    width: 1000px !important;
}

============================
=========== /* FAVORITES - "BY OTHER" - THUMBNAILS Columns - === */
#faves-right>ul{
    -moz-column-gap: 30px !important;
    -moz-column-rule-style: solid !important;
    -moz-column-rule-width: 2px !important;
    -moz-column-width: 573px !important;
    display: block !important;
    height: 700px !important;
    margin-top: -50px !important;
    overflow: hidden !important;
    width: 1850px !important;
}
#faves-right>ul{
    -webkit-columns-gap: 30px !important;
    -webkit-columns-rule-style: solid !important;
    -webkit-columns-rule-width: 2px !important;
    -webkit-columns-width: 573px !important;
}


============================
=========== /* POOL - MEMBERS LIST (/admin/members/) + BANNED (/admin/banned/) - 2/3 Columns - === */
#MemberList>tbody {
    -moz-column-gap: 2px !important;
    -moz-column-rule-style: solid !important;
    -moz-column-rule-width: 2px !important;
    margin-left:-650px !important;
    display: block !important;
    height: 450px !important;
    margin-top: 75px !important;
    overflow: hidden !important;
    width: 1750px !important;
    -moz-column-width:600px !important;
}


============================
===========  /* INVITE - COLUMN - CONTACTS -
    -moz-column-count: 10 !important;
 === */
#Main>table>tbody>tr>td>form>table>tbody>tr:nth-child(6) td {

    -moz-column-width:250px !important;
    -moz-column-gap: 2px !important;
    -moz-column-rule-style: solid !important;
    -moz-column-rule-width: 2px !important;
    margin-left:-450px !important;
    display: block !important;
    height: 800px !important;
    margin-top: 15px !important;
    overflow: hidden !important;
    overflow-y: scroll !important;
    overflow-x: scroll !important;
    width: 1850px !important;
margin-right:-300px !important;
}



============================
======= FLICKR - COMMENTS COLUMNS (test 1) ==== */

/* Correspondance px / en (font-size default : 16px) ==
500px = 31.250em
250px = 15.625em
250px = 18.750em
AVEC em online - tool : http://riddle.pl/emcalc/ === */


/* ============ -
#primary-column #invites-and-comments #comments
#invites-and-comments
#photo-activity

outline : red solid 1px !important;

-moz-column-width: 573px !important;
-webkit-columns-width: 573px !important;

     width: 95em !important;
width : 1110px !important;
width: 95em !important;
height: 50em !important;
height :900px !important;
float : left !important;
z-index : 9500 !important;
 === */
========================================
====== COLUMN - COMMENTS LIST - FLICKR
#photo-activity {
    -moz-column-count: 2 !important;
    -webkit-column-count: 2 !important;

    -moz-column-gap: 5em !important;
    -webkit-column-gap: 5em !important;

    -moz-column-rule-style: solid !important;
    -webkit-columns-rule-style: solid !important;

    -moz-column-rule-width: 2px !important;
    -webkit-columns-rule-width: 2px !important;

     overflow:hidden !important;
    overflow-x:hidden !important;
    overflow-y:hidden !important;

    display : block  !important;
    position:relative !important;

    width: 95em !important;
    min-height : 500px !important;
    margin-left : -70px !important;
    padding-left : 40px !important;
    padding-right : 30px !important;
    padding-top : 40px !important;
    outline : grey solid 1px !important;
}
/* PHOTO PAGE - COMMENTS LIST - COLUMNS - FIRST ELEMENT (SPACE For "ADD COMMENT" -
outline : yellow solid 1px  !important;
=== */
#comments li:first-of-type  {
    margin-top :140px !important;
   position : relative  !important;
}


========================================
/* COPY TWEAK - FAVORITES in COMMENTS - pour future place REPLY -  === */
#comments li.fave-block {
    margin-top : 200px !important;
     margin-bottom : 20px !important;
    top: -11px !important;
    width: 443px !important;
    left:-35px !important;
}

/* COPY TWEAK - COMMENTS-SIDE - SCRIPT - "Quick Comment" And  "Move Comment Form UP" - === */
.comment-block.add-comment-form.adding-comment{
    left: -57px !important;
top: 110px !important;

    margin: 0 0 -11px -20px !important;
min-height: 56px !important;
}
#comments .adding-comment textarea  {
min-height: 70px !important;
    margin-bottom: -18px !important;
    margin-top: -10px !important;
width: 470px !important;
    position:relative !important;
}
#comments div.comment-block .comment-icon {
    margin-top: 13px !important;
}
/* copy SUPP (?) -
#photo-activity {
    position:relative !important;
    top: 40px !important;
    display:block !important;
    margin-bottom:100px !important;
} === */