Advertisement

Advertisement


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.


<!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 -


<!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 -


<!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
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 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.


<!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
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 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.


<!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
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 Rule Color

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


<!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
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 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.


<!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
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 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.


<!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

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 Width

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


<!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
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.










Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.