CSS3 Layout

CSS3 layout is nothing but a way to use different HTML and CSS elements together to design an attractive looking website.The CSS layout is used to design the web pages such as home page, contact us, about us etc. which together constitute a website. There are various elements and different ways of creating a website layout:

Design layout of a web page

Design layout	Description
HTML Div with CSS	It is easy and widely used.
HTML Table	It is less preferred than precious one and also slow.
HTML Frameset	It is not used now in HTMl 5.

Look at the example below and observe how all the elements brought together to make a webpage layout.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 layout </title>
<meta charset="UTF-8">
</head>
<style>
body{
margin-top:15px;
}
ul li{
margin:5px;
}
li a {
color: blueviolet;
}
table{
font:12px verdana, sans-serif;
width:80%;
margin:0 auto;
}
#in{
background-color:#f0f0f0;
width:80%;
vertical-align:top;
}
#footer{
background-color:#73b767;
}
#header{
background-color:#73b767;
}
#body-height{
height: 200px;
}
#sidebar{
background-color:lightgreen;
width:20%;
vertical-align:top;
}
#p{
text-align:center;
margin:5px;
}
</style>
<body>
<table cellpadding="10px;" cellspacing="0">
<tr>
<td colspan="2" id="header">
<h1>Coderepublics</h1>
</td>
</tr>
<tr id="body-height">
<td id="sidebar">
<ul style="list-style:none; padding:0px; margin:0px;">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</td>
<td id="in">
<h2>Welcome to our site</h2>
<p>Hello World!</p>
</td>
</tr>
<tr>
<td colspan="2" id="footer">
<p style="text-align:center; margin:5px;">copyright © Coderepublics</p>
</td>
</tr>
</table>
</body>
</html>

Output

CSS 3 layout

Welcome to our site

Hello World!

CSS3 Multi-Columns

The multi-column layout module in CSS 3 is used for creating multiple column layouts in an easy and efficient way which looks very attractive also. This layout allows easy definition of multiple columns of text - just like in newspapers or in some magazines.

There are various properties listed below, have a look.

CSS Multi-column Properties

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width

CSS Column Count

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

Look at the example below, in which a div element is divided into multiple colummn -

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Multiple Column layout </title>
<meta charset="UTF-8">
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
.div{
height:25px;
max-width:100%;
background:blueviolet;
text-align:center;
padding:10px;
color:white;
font-size:25px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="div">Heading</div>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
</div>
</body>
</html>

Output

CSS 3 Multiple Column layout

Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

CSS Column Gap

The column-gap property specifies the width of gap between the columns.

In the example below, if you increase the value of column-gap, the space between the column will increase -

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Multiple Column Gap </title>
<meta charset="UTF-8">
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap:50px;
}
.div{
height:25px;
max-width:100%;
background:blueviolet;
text-align:center;
padding:10px;
color:white;
font-size:25px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="div">Heading</div>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
</div>
</body>
</html>

Output

CSS 3 Multiple Column Gap

Heading

CSS Column Rule Style

The column-rule-style property specifies the style of the rule between columns. In this, the gap present between the column will also display a line, that line's style is specified in this property.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Multiple Column Rule </title>
<meta charset="UTF-8">
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 30px; /* Chrome, Safari, Opera */
-moz-column-gap: 30px; /* Firefox */
column-gap: 30px;
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}
.div{
height:25px;
max-width:100%;
background:#146082c4;
text-align:center;
padding:10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="div">Heading</div>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>

Output

CSS 3 Multiple Column Rule

Heading

CSS Column Rule Width

The column-rule-width property specifies the width of the rule between columns. When you increase the value of this property, the width of the rule will also increase.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Multiple Column Rule Width </title>
<meta charset="UTF-8">
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 30px; /* Chrome, Safari, Opera */
-moz-column-gap: 30px; /* Firefox */
column-gap: 30px;
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}
.div{
height:25px;
max-width:100%;
background:#146082c4;
text-align:center;
padding:10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="div">Heading</div>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod.
</div>
</body>
</html>

Output

CSS 3 Multiple Column Rule Width

Heading

CSS Column Rule Color

The column-rule-color property specifies the color of the line between the columns.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Multiple Column Rule Color </title>
<meta charset="UTF-8">
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 30px; /* Chrome, Safari, Opera */
-moz-column-gap: 30px; /* Firefox */
column-gap: 30px;
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
-webkit-column-rule-color: red; /* Chrome, Safari, Opera */
-moz-column-rule-color: red; /* Firefox */
column-rule-color: red;
}
.div{
height:25px;
max-width:100%;
background:purple;
color:white;
text-align:center;
padding:15px 0px 15px 25px;
color:white;
font-size:25px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="div">Heading</div>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim.
</div>
</body>
</html>

Output

CSS 3 Multiple Column Rule Color

Heading

CSS Column Rule

The column-rule property is a shorthand property for setting all the column-rule properties listed above above. Have a look at the example below, to understand the syntax of the shorthand property.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Multiple Column Rule </title>
<meta charset="UTF-8">
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 30px; /* Chrome, Safari, Opera */
-moz-column-gap: 30px; /* Firefox */
column-gap: 30px;
-webkit-column-rule: 1px solid blueviolet; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid blueviolet; /* Firefox */
column-rule: 5px solid blueviolet;
}
.div{
max-width:100%;
background:seagreen;
text-align:center;
padding:10px;
color: white;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="div">Heading</div>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod . Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming.
</div>
</body>
</html>

Output

CSS 3 Multiple Column Rule

Heading

CSS Column Span

The column-span property specifies that for how many columns an element should span across. It is usually used with headings. Look at the example below, to understand how columns are spanned.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Multiple Column Rule Color </title>
<meta charset="UTF-8">
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 30px; /* Chrome, Safari, Opera */
-moz-column-gap: 30px; /* Firefox */
column-gap: 30px;
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}
h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
.div{
max-width:100%;
background:#24b3b7;
text-align:center;
padding:20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="div">Heading</div>
<div class="newspaper">
<h2>Lorem Ipsum Dolor Sit Amet</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet.
</div>
</body>
</html>

Output

CSS 3 Multiple Column Rule Color

Heading

Lorem Ipsum Dolor Sit Amet

CSS Column Width

The column-width property specifies the width for the columns.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Multiple Column width </title>
<meta charset="UTF-8">
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
-moz-column-width: 100px; /* Firefox */
column-width: 100px;
}
.div{
max-width:100%;
color:white;
background:#24b3b7;
text-align:center;
padding:20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="div">Heading</div>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming.
</div>
</body>
</html>

Output

CSS 3 Multiple Column width

Heading

Recommended :

1 . How to change background in CSS ?
2 . How to create Heading in HTML
3 . What is Wordwrap in CSS ?
4 . how to use CSS border

5 . CSS beautiful buttons
6 . How to use CSS 2D Transform ?
7 . Create Youtube Thumbnail Generater in PHP
8 . Create Simple Login Form

Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors