8/4/13

CSS3 Multiple Columns

Search w3schools.c Select Language HOME HTML C SS JAVASC RIPT JQUERY XML ASP.NET PHP SQL MORE...
R EFER ENC ES | EXAMPLES

Get Certified
Study Web Technologies and get a diploma at w3schools.com

CSS3 Tutorial
CSS3 HOME CSS3 Introduction CSS3 Borders CSS3 Backgrounds CSS3 Text Effects CSS3 Fonts CSS3 2D Transforms CSS3 3D Transforms CSS3 Transitions CSS3 Animations CSS3 Multiple Columns CSS3 User Interface

CSS3 Multiple Columns

Previous Next Chapter

CSS3 Multiple Columns

With CSS3, you can create multiple columns for laying out text - like in newspapers! In this chapter you will learn about the following multiple column properties: column-count column-gap column-rule

Browser Support
Property c o l u m n c o u n t c o l u m n g a p c o l u m n r u l e Internet Explorer 10 and Opera supports multiple columns properties. Firefox requires the prefix -moz-. Chrome and Safari requires the prefix -webkit-. Note: Internet Explorer 9, and earlier versions, does not support the multiple columns properties. Browser Support

CSS3 References Related Searches: PHP Tutorials Free HTML Tutorial Create HTML Pages Learn PHP Learn Basic HTML HTML And JavaScript W eb Design Templates SQL Server Database
CSS3 Reference CSS3 Browser Support CSS3 Selectors CSS3 Reference Aural CSS3 Web Safe Fonts CSS3 Units CSS3 Colors CSS3 Color Values CSS3 Color Names CSS3 Color HEX

CSS3 Create Multiple Columns

The column-count property specifies the number of columns an element should be divided into:

Example
Divide the text in a div element into three columns:

d i v { m o z c o l u m n c o u n t : 3 ;/ *F i r e f o x* / w e b k i t c o l u m n c o u n t : 3 ;/ *S a f a r ia n dC h r o m e* / c o l u m n c o u n t : 3 ; }
Try it yourself

CSS3 Specify the Gap Between Columns

The column-gap property specifies the gap between the columns:

Example
Specify a 40 pixels gap between the columns:

d i v { m o z c o l u m n g a p : 4 0 p x ;/ *F i r e f o x* / w e b k i t c o l u m n g a p : 4 0 p x ;/ *S a f a r ia n dC h r o m e* / c o l u m n g a p : 4 0 p x ; }
Try it yourself

CSS3 Column Rules

The column-rule property sets the width, style, and color of the rule between columns.

Example
Specify the width, style and color of the rule between columns:

d i v

www.w3schools.com/css3/css3_multiple_columns.asp

1/2

8/4/13

CSS3 Multiple Columns

{ m o z c o l u m n r u l e : 3 p xo u t s e t# f f 0 0 f f ;/ *F i r e f o x* / w e b k i t c o l u m n r u l e : 3 p xo u t s e t# f f 0 0 f f ;/ *S a f a r ia n dC h r o m e* / c o l u m n r u l e : 3 p xo u t s e t# f f 0 0 f f ; }
Try it yourself

New Multiple Columns Properties

Property column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns Description Specifies the number of columns an element should be divided into Specifies how to fill columns Specifies the gap between the columns A shorthand property for setting all the column-rule-* properties Specifies the color of the rule between columns Specifies the style of the rule between columns Specifies the width of the rule between columns Specifies how many columns an element should span across Specifies the width of the columns A shorthand property for setting column-width and column-count CSS 3 3 3 3 3 3 3 3 3 3

Previous

Next Chapter

Book Your Air Ticket

Round Trip Leaving From: Going To:
-----------------------------

One Way Passengers:

1

Depart Date:
4 Aug 2013

Return Date:
4 Aug 2013

Top 10 Tutorials
HTML Tutorial HTML5 Tutorial C SS Tutorial C SS3 Tutorial JavaScript Tutorial jQuery Tutorial SQL Tutorial PHP Tutorial ASP.NET Tutorial XML Tutorial

Top 10 References
HTML/HTML5 Reference C SS 1,2,3 Reference C SS 3 Browser Support JavaScript HTML DOM XML DOM PHP Reference jQuery Reference ASP.NET Reference HTML C olors

Examples
HTML Examples C SS Examples XML Examples JavaScript Examples HTML DOM Examples XML DOM Examples AJAX Examples ASP.NET Examples Razor Examples ASP Examples SVG Examples

Quizzes
HTML Quiz HTML5 Quiz XHTML Quiz C SS Quiz JavaScript Quiz jQuery Quiz XML Quiz ASP Quiz PHP Quiz SQL Quiz

Color Picke

Statistics

Browser Stat Browser OS Browser Disp

RE P O RT E RRO R

HO ME

TO P

P RI N T

FO RU M

A BO U T

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use and privacy policy. C opyright 1999-2013 by Refsnes Data. All Rights Reserved.

www.w3schools.com/css3/css3_multiple_columns.asp

2/2