Frontendplace Blog

Sharing Frontend developing ideas

  • Adds

Multicolumn in firefox and safari

Posted by info on October 24th, 2009

For the developers who like to use the extra CSS draft 3 possibilities and don’t want to wait until internet explorer supports this. You can use the multi column properties :column-width, :column-gap and :column-rule. Coloring the selected text is an other example in draft3 css property
Example:
multicolumn

<style type="text/css">
div {
	column-width: 18em;
	column-gap: 2em;   /* shown in yellow */
	column-rule: 4px solid green;
	padding: 5px;      /* shown in blue */
	-moz-column-count:2;
	-moz-column-width:18em;
	-moz-column-gap:2em;
	-moz-column-rule: 4px solid green;
	-webkit-column-count:2;
	-webkit-column-width:18em;
	-webkit-column-gap:2em;
	-webkit-column-rule: 4px solid green;
}

/* draw any selected text yellow on red background */

::selection {color: gold; background: red;}
::-moz-selection {color: gold; background: red;}
::-webkit-selection { color: gold; background: red;}

/* draw selected text in a paragraph white on black */
p::-moz-selection { color: white; background: black;}
p::selection { color: white; background: black;}
p::-webkit-selection { color: white; background: black; }
</style>

Example: Multi column draft3

See for documentation:

http://www.w3.org/TR/css3-multicol/

https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>