Home » Tutorials

How to Generate Runtime Multi-columns with CSS3

Tutorials
Author Reading 12 min Views 72 Published by Modified by

Multi-columns with CSS3 tutorial. Have you ever had the need to create multi-column layout to display any information? What looks like the columns of newspapers. I think that your answer is – yes. And many of you may have implemented it using just ordinary DIV (or other) elements, with the property float: left. More recently – CSS3 gives us his alternative. You do not need to be cut into blocks of text output – multi-column layout is quite possible to do using a single element.

In our example we will use the new CSS3 properties: column-count, column-gap and column-rule. It is possible that not all browsers support these CSS3 styles, but I think – most newer browsers already support them. Here we see that the result should look like:

Multi-columns result

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. css/main.css
  5. Step 3. JavaScript
  6. js/script.js
  7. Conclusion
Live Demo

[sociallocker]

download result

[/sociallocker]

Ok, download the example files and lets start coding !

Step 1. HTML

Here are full html code of our result page. Pay attention – that I have only single DIV element with text.

index.html

01 <!DOCTYPE html>
02 <html lang="en" >
03     <head>
04         <meta charset="utf-8" />
05         <title>Multi-columns with CSS3 | Script Tutorials</title>
06         <link href="css/main.css" rel="stylesheet" type="text/css" />
07         <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
08         <script type="text/javascript" src="js/script.js"></script>
09     </head>
10     <body>
11         <div class="controls">
12             <input type="button" id="more_cols" value="More columns" />
13             <input type="button" id="less_cols" value="Less columns" />
14             <input type="button" id="more_gap" value="More gap" />
15             <input type="button" id="less_gap" value="Less gap" />
16         </div>
17         <div class="container" id="container">
18             <p>The King sat naked. Like a foolish pauper on the street, he sat leaning
19             against  a  cold  wall, drawing in his blue, goose-bumped legs. He shivered,
20             with his eyes closed, he listened, but everything was quiet.</p>
21             <p>He awoke at midnight from a nightmare and immediatelly understood  that
22             he  was  finished.  Some  one  weezed and writhed by the door of the bedroom
23             suite, he heard footsteps, metalic jingling and  drunken  mummbling  of  His
24             Highness,  Uncle  Buht: "Let me through... Let me.. Break it down, hell with
25             it..." Wet with icy sweat, he slintly rolled off  his  bed,  ducked  into  a
26             secter  closet,  and  loosing  himself  he ran down the underground passage.
27             Something sqelched under his bare feet, the startled rats dashed  away,  but
28             he  did  not notice anything, just now, sitting next to a wall he remembered
29             everything; the darkness, the slippery walls, and the pain from  a  blow  on
30             the  head against the shakled door to the temple, and his own unberable high
31             yelp.</p>
32             <p>They shall not enter here, he thought. No one shall enter here. Only if
33             the King  order's  so.  But  the  King  shall  not  order...  He   snickered
34             hysterically. Oh no, the King will not order! He carefully un screwed up his
35             eyes  and  saw  his  blue, hairless legs with scraped knees. Still alive, he
36             thought. I will live, because they shall not enter here.</p>
37             <p>Everything in the temple  was  blueish  from  the  cold  light  of  the
38             lanterns -- long glowing tubes that were stretched under the ceiling. In the
39             center,  God stood on an eminence, big, heavy, with sparkling dead eyes. The
40             King continuously and stupidly stared, until God was suddenly screened by  a
41             shabby  lay  brother,  still  a  greenhorn. Scraching, with an open mouth he
42             gazed at the naked King. The King squinted once again. Scum, he  thought,  a
43             lousy  vermine,  catch the mongrel and to the dogs, for them to ravage... He
44             reasoned that he did not remember the lout well, but he was  long  gone.  So
45             scrawny,   snotty...   That's  all  right,  we'll  remember.  We'll  remeber
46             everything, Your Highness, Uncle Buht. During the father's  reighn,  I  dare
47             say you sat quietly, drank a bit and kept silent, were afraid to be noticed,
48             you knew that King Prostyaga did not forget you ignoble treachery...</p>
49         </div>
50         <footer>
51             <h2>Multi-columns with CSS3</h2>
52             <a href="https://www.script-tutorials.com/how-to-do-multi-columns-with-css3/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
53         </footer>
54     </body>
55 </html>

Step 2. CSS

Now – all CSS styles

css/main.css

01 *{
02     margin:0;
03     padding:0;
04 }
05 body {
06     background-color:#bababa;
07     color:#fff;
08     font:14px/1.3 Arial,sans-serif;
09 }
10 footer {
11     background-color:#212121;
12     bottom:0;
13     box-shadow: 0 -1px 2px #111111;
14     display:block;
15     height:70px;
16     left:0;
17     position:fixed;
18     width:100%;
19     z-index:100;
20 }
21 footer h2{
22     font-size:22px;
23     font-weight:normal;
24     left:50%;
25     margin-left:-400px;
26     padding:22px 0;
27     position:absolute;
28     width:540px;
29 }
30 footer a.stuts,a.stuts:visited{
31     border:none;
32     text-decoration:none;
33     color:#fcfcfc;
34     font-size:14px;
35     left:50%;
36     line-height:31px;
37     margin:23px 0 0 110px;
38     position:absolute;
39     top:0;
40 }
41 footer .stuts span {
42     font-size:22px;
43     font-weight:bold;
44     margin-left:5px;
45 }
46 /*new styles*/
47 .container {
48     background:#C5DFF0;
49     color:#000;
50     margin:20px auto;
51     padding:20px;
52     position:relative;
53     width:800px;
54     border-radius:5px;
55     -moz-border-radius:5px;
56     -webkit-border-radius:5px;
57     box-shadow:1px 1px 5px #111111;
58     column-count: 3;
59     column-gap: 3em;
60     column-rule: 1px dashed black;
61     -moz-column-count: 3;
62     -moz-column-gap: 3em;
63     -moz-column-rule: 1px dashed black;
64     -webkit-column-count: 3;
65     -webkit-column-gap: 3em;
66     -webkit-column-rule: 1px dashed black;
67 }
68 .controls {
69     background:#C5DFF0;
70     margin:20px auto;
71     padding:20px;
72     position:relative;
73     width:800px;
74     box-shadow:1px 1px 5px #111111;
75     border-radius:5px;
76     -moz-border-radius:5px;
77     -webkit-border-radius:5px;
78 }
79 .controls input[type=button] {
80     border: 1px solid #000;
81     background-color: #666;
82     box-shadow: 0 1px 0 rgba(150, 150, 150, 0.5);
83     color: #FFF;
84     cursor: pointer;
85     font-size: 14px;
86     font-weight: bold;
87     margin-right: 10px;
88     padding: 8px 12px;
89 }
90 .controls input[type=button]:hover {
91     background-color:#444;
92 }
93 .controls input[type=button]:active {
94     background-color:#000;
95 }

Most imporant styles is styles of ‘.container’ selector. See how I’m using our new styles.

Step 3. JavaScript

I added some JS functionality, so you can play with the styles (column-count and column-gap) in real time.

js/script.js

01 $(function(){
02     var iColumns = 3;
03     var iGap = 3;
04     var cont = document.getElementById('container');
05     $('#less_cols').click(function(e) { // mouse click handler
06         iColumns--; // decreasing amount of columns
07         if (iColumns < 1) iColumns = 1;
08         cont.style.MozColumnCount = iColumns; // apply styles
09         cont.style.WebkitColumnCount = iColumns;
10     });
11     $('#more_cols').click(function(e) {
12         iColumns++; // increasing amount of columns
13         if (iColumns > 5) iColumns = 5;
14         cont.style.MozColumnCount = iColumns; // apply styles
15         cont.style.WebkitColumnCount = iColumns;
16     });
17     $('#less_gap').click(function(e) {
18         iGap--; // decreasing value of gap
19         if (iGap < 0) iGap = 0;
20         cont.style.MozColumnGap = iGap+'em'; // apply styles
21         cont.style.WebkitColumnGap = iGap+'em';
22     });
23     $('#more_gap').click(function(e) {
24         iGap++; // increasing value of gap
25         if (iGap > 5) iGap = 5;
26         cont.style.MozColumnGap = iGap+'em'; // apply styles
27         cont.style.WebkitColumnGap = iGap+'em';
28     });
29 });
Live Demo

Conclusion

I hope that our nice tips help you. Good luck!

Rate article
© 2025 Script Tutorials