CSS3 Series Part 3: Multi Column Layout With CSS3

If you want to divide your columns with a border then you can use the "column-rule-style" property as shown in the following example. After the addition, our output will be like: There're various kinds of border styles that you can use for your styling. Please find the following table for other "column-rule-style" values with sample border. If you want to specify an amount for the gap between the columns, say a gap of 50px, you can use the "column-gap" property as shown in the following example. When you compare this output with the preceding one, you'll get the difference. You can also add images to your paragraph as shown below. Now, let's provide our article or our <div> content a Heading. To provide a heading or if you want to provide any title to your content then you can use the "column-span" property. Note: Firefox doesn't support this property. So here, we'll run our code in Google Chrome. Let's look at an example: This property has 2 values as shown in the following table. We'll add a <H1> element under the <div> element. After running the code in the browser, we'll get the following output. If you want to provide a vertical heading then you can set "column-span:all". After this, your heading will be shown in a vertical format. Now, we'll discuss the last property of our article, in other words, the "column-rule" property. This property is used to set the width, style, and color of the column rule between columns. Now, when we run our code, we'll get an output of a column rule of style double that will be 3 pixels in width in Red color as shown in the following output.