Two
Column and Three Column Layout Using HTML and CSS
Since Many User Want To Create
A Two Column and Three Column Layout in Our Site So Here is the
Example With Code To Create it Easily.
1.Two
Column Layout Right Sidebar
Code
:
<!DOCTYPE
html>
<html>
<head>
<title>Columns
Layout 1</title>
<style
type="text/css">
.column1
{
width:
70%;
float:left;
background:
whitesmoke;
}
.column2
{
width:
30%;
float:
right;
background:
orange;
}
footer
{
clear:
both;
background:
grey;
padding:
20px;
}
header
{
background:
grey;
padding:
20px;
}
body{
width:
100%;
}
header
section
{
padding:
20px;
}
footer
section
{
padding:
20px;
}
.column1
section
{
padding:
20px;
}
.column2
section
{
padding:
20px;
}
</style>
</head>
<body>
<header>
<section>This
is demo Of Two Column Layout</section>
</header>
<div
class="column1">
<section><p>This
is left Content Area</p><br><p>
<strong>Where
does it come from?</strong>
Contrary to popular belief,
Lorem Ipsum is not simply random text. It has roots in a piece of
classical Latin literature from 45 BC, making it over 2000 years old.
Richard McClintock, a Latin professor at Hampden-Sydney College in
Virginia, looked up one of the more obscure Latin words, consectetur,
from a Lorem Ipsum passage, and going through the cites of the word
in classical literature, discovered the undoubtable source. Lorem
Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero,
written in 45 BC. This book is a treatise on the theory of ethics,
very popular during the Renaissance. The first line of Lorem Ipsum,
"Lorem ipsum dolor sit amet..", comes from a line in
section 1.10.32.
</p></section>
</div>
<div
class="column2">
<section><p>This
is Right Sidebar Area</p><br><p>
<strong>Why
do we use it?</strong>
It is a long established fact
that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it
has a more-or-less normal distribution of letters, as opposed to
using 'Content here, content here', making it look like readable
English. Many desktop publishing packages and web page editors now
use Lorem Ipsum as their default model text, and a search for 'lorem
ipsum' will uncover many web sites still in their infancy. Various
versions have evolved over the years, sometimes by accident,
sometimes on purpose (injected humour and the like).
</p></section>
</div>
<footer>
<section>This
is Footer</section>
</footer>
</body>
</html>
Screenshot
:
2.Two
Column Layout Left Sidebar
Code
:
<!DOCTYPE
html>
<html>
<head>
<title>Columns
Layout 2</title>
<style
type="text/css">
.column1
{
width:
70%;
float:right;
background:
whitesmoke;
}
.column2
{
width:
30%;
float:
left;
background:
orange;
}
footer
{
clear:
both;
background:
grey;
padding:
20px;
}
header
{
background:
grey;
padding:
20px;
}
body{
width:
100%;
}
header
section
{
padding:
20px;
}
footer
section
{
padding:
20px;
}
.column1
section
{
padding:
20px;
}
.column2
section
{
padding:
20px;
}
</style>
</head>
<body>
<header>
<section>This
is demo Of Two Column Layout</section>
</header>
<div
class="column1">
<section><p>This
is left sidebar Area</p><br><p>
<strong>Where
does it come from?</strong>
Contrary to popular belief,
Lorem Ipsum is not simply random text. It has roots in a piece of
classical Latin literature from 45 BC, making it over 2000 years old.
Richard McClintock, a Latin professor at Hampden-Sydney College in
Virginia, looked up one of the more obscure Latin words, consectetur,
from a Lorem Ipsum passage, and going through the cites of the word
in classical literature, discovered the undoubtable source. Lorem
Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero,
written in 45 BC. This book is a treatise on the theory of ethics,
very popular during the Renaissance. The first line of Lorem Ipsum,
"Lorem ipsum dolor sit amet..", comes from a line in
section 1.10.32.
</p></section>
</div>
<div
class="column2">
<section><p>This
is Right content Area</p><br><p>
<strong>Why
do we use it?</strong>
It is a long established fact
that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it
has a more-or-less normal distribution of letters, as opposed to
using 'Content here, content here', making it look like readable
English. Many desktop publishing packages and web page editors now
use Lorem Ipsum as their default model text, and a search for 'lorem
ipsum' will uncover many web sites still in their infancy. Various
versions have evolved over the years, sometimes by accident,
sometimes on purpose (injected humour and the like).
</p></section>
</div>
<footer>
<section>This
is Footer</section>
</footer>
</body>
</html>
Screenshot
:
3.Three
Column Layout
Code
:
<!DOCTYPE
html>
<html>
<head>
<title>Columns
Layout 3</title>
<style
type="text/css">
.column1
{
width:
20%;
float:left;
background:
orange;
}
.column2
{
width:
60%;
float:
left;
background:
yellow;
}
.column3
{
width:
20%;
float:
left;
background:
orange;
}
.column1,.column2,.column3
{
min-height:
600px;
}
footer
{
clear:
both;
background:
grey;
padding:
20px;
}
header
{
background:
grey;
padding:
20px;
}
body{
width:
100%;
height:
100%;
}
header
section
{
padding:
20px;
}
footer
section
{
padding:
20px;
}
.column1
section
{
padding:
20px;
}
.column2
section
{
padding:
20px;
}
.column3
section
{
padding:
20px;
}
article,article
div
{
height:
100%;
}
</style>
</head>
<body>
<header>
<section>This
is demo Of Three Column Layout</section>
</header>
<article>
<div
class="column1">
<section><p>This
is left sidebar Area</p><br><p>
<strong>Where
does it come from?</strong>
Contrary to popular belief,
Lorem Ipsum is not simply random text. It has roots in a piece of
classical Latin literature from 45 BC, making it over 2000 years old.
Richard McClintock, a Latin professor at Hampden-Sydney College in
Virginia, looked up one of the more obscure Latin words, consectetur,
from a Lorem Ipsum passage, and going through the cites of the word
in classical literature,
</p></section>
</div>
<div
class="column2">
<section><p>This
is content Area</p><br><p>
<strong>Why
do we use it?</strong>
It is a long established fact
that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it
has a more-or-less normal distribution of letters, as opposed to
using 'Content here, content here', making it look like readable
English.
</p></section>
</div>
<div
class="column3">
<section><p>This
is Right Sidebar Area</p><br><p>
<strong>Why
do we use it?</strong>
It is a long established fact
that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it
has a more-or-less normal distribution of letters, as opposed to
using 'Content here, content here', making it look like readable
English.
</p></section>
</div>
</article>
<footer>
<section>This
is Footer</section>
</footer>
</body>
</html>
Screenshot
:
Thank You
