HTML CSS Layout Tutorial with 2 and 3 Column Design Example Code

CSS Layout

CSS Layout is a technique which is used to create multiple columns based web page design. In this tutorial 2 columns & 3 columns, layout code examples are presented.

Normal Flow

Normal Flow means that how the browser will display the HTML Elements. If you use block level elements than it will display with the next line.

Example 1 – Normal Flow Of HTML Layout

<!DOCTYPE html>
<html>
  <body>
	<div>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</div>
	<div>
		<p>Lorem ipsum dolor sit amet, quam quisque id diam. Eget nullam non nisi est sit amet posuere urna nec.</p>
	</div>
  </body>
</html>

In the above code, we do not apply any of the CSS properties to the HTML Element. And below screenshot shows how it will be displayed with the normal flow.

CSS Layout With Normal Flow
Fig.1 – HTML CSS Layout With Normal Flow.

Two Columns CSS Layout Example Code Designs

Here we creating a simple 2 columns layout designs by the use of some CSS Properties.

Example 2 – Two-Columns HTML Layout Design Technqe

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container
        {
 
        }
      .left-sidebar
        {
          float:left; 
          width:50%;
          height:220px; 
          background-color:red;
        }
      .right-sidebar 
        {
          float:right;
          width:50%;
          height:220px; 
          background-color:blue;
        }
    </style>
  </head>
   
  <body>
    <div class="container">
        <div class="left-sidebar">
			<h3>Column I</h3>
			<p>Non arcu risus quis varius. Tempor commodo ullamcorper a lacus vestibulum sed arcu non odio. Ultricies leo integer malesuada nunc vel. Est ullamcorper eget nulla facilisi etiam dignissim.</p>
        </div>
         
        <div class="right-sidebar">
			<h3>Column II</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus.</p>
        </div>  
    </div>
     
  </body>
</html>

In the above code, we apply some CSS properties to the HTML Elements. And below screenshot shows how it will be displayed with the two-columns.

CSS Layout Examples
Fig.2 – Two columns CSS Layout Example code.

Three Columns CSS Layout Tutorial with code

Here we creating a simple three columns layout design by the use of some CSS Properties to enhance the look of the layout

Example 3 – Three-Columns HTML Layout with float property

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container
        {
 
        }
      .left-sidebar
        {
          float:left; 
          width:25%;
          background-color:yellow;
        }
      .left-sidebar-inner
        {
          background-color:white; 
          height:180px; 
          margin:10px;
        }
      .main 
        {
          float:left;
          width:50%; 
          background-color:orange;
        }
      .main-inner
        {
          background-color:white; 
          height:180px;
          margin:10px; 
        }
     .right-sidebar
        {
          float:right;
          width:25%; 
          background-color:brown;
        }
     .right-sidebar-inner
        {
          background-color:white; 
          height:180px;
          margin:10px;
        }
     .cleaner
        {
          clear:both;
        }
    </style>
  </head>
   
  <body>
    <div class="container">
        <div class="left-sidebar">
            <div class="left-sidebar-inner">
				<h3>Column I</h3>
                <p>Lorem ipsum in massa tempor nec feugiat. Elit duis tristique sollinibh.</p>
            </div>
        </div>
         
        <div class="main">
            <div class="main-inner">
				<h3>Column II</h3>
				<p> Quis blandit turpis cursus in hac habitasse. Tortor dignissim scelerisque convallis aenean et tortor at.</p>
            </div>
        </div>
         
        <div class="right-sidebar">
            <div class="right-sidebar-inner">
				<h3>Column III</h3>
				<p>Turpis massa tincidunt dui ut. Imperdiet proin fermentum leo vel orci.</p>
            </div>
        </div>
         
        <div class="cleaner">
        </div>
    </div>
     
  </body>
</html>

In the above code, we apply some CSS properties to the HTML Elements. And below screenshot shows how it will be displayed with the three-columns.

CSS Layout Tutorial with three column Design code
Fig.3 – Three Columns Layout Design Example with code.

Two Columns Layout Design With Header Footer

Here we creating a simple two columns layout design with header and footer by the use of some CSS Properties.

Example 4 – Two-Columns Layout Design with header and footer area.

<!DOCTYPE html>
<html>
  <head>
    <style>
		.container
		{
		}
		.header
		{
			background-color:yellow;
			border: 1px solid yellow;
        }
		.header-inner
		{
			background-color:white; 
			height:40px; 
			margin:10px;
		}
		.left-sidebar
		{
			float:left; 
			width:40%;
			height:150px; 
			background-color:orange;
		}
		.left-sidebar-inner
		{
			background-color:white; 
			height:130px; 
			margin:10px;
		}
		.right-sidebar
		{
			float:right;
			width:60%;
			height:150px; 
			background-color:green;
		}
		.right-sidebar-inner
		{
			background-color:white; 
			height:130px;
			margin:10px;
		}
		.cleaner
		{
			clear:both;
		}
		.footer
		{
			height:60px; 
			background-color:brown; 
			padding:1px;
		}
		.footer-inner
		{
			background-color:white; 
			height:40px;
			margin:9px;
		}
    </style>
  </head>
   
  <body>
    <div class="container">
		<div class="header">
			<div class="header-inner">
			</div>
		</div>
			
        <div class="left-sidebar">
            <div class="left-sidebar-inner">
                 
            </div>
        </div>
         
        <div class="right-sidebar">
            <div class="right-sidebar-inner">
             
            </div>
        </div>
         
        <div class="cleaner">
        </div>    
         
        <div class="footer">
            <div class="footer-inner">
             
            </div>
        </div>
    </div>
     
  </body>
</html>

In the above code, we apply some CSS properties to the HTML Elements. And below screenshot shows how it will be displayed with the two-columns, header and footer.

Two Column Layout With Header And Footer
Fig.4 – Two Column Layout with Header and Footer Example Code

Caution:You also change the width of left-sidebar and right-sidebar as your web page layout requirement.

Three Columns Layout Design With Header Footer

Here we creating a simple three columns layout design with header and footer by the use of some CSS Properties.

Example 5 – Three-Columns Layout Design Example with header and footer area

<!DOCTYPE html>
<html>
  <head>
    <style>
		.container
		{
		}
		.header
		{
			background-color:brown;
			border: 1px solid brown;
        }
		.header-inner
		{
			background-color:white; 
			height:40px; 
			margin:10px;
		}
		.left-sidebar
		{
			float:left; 
			width:20%;
			height:150px; 
			background-color:orange;
		}
		.left-sidebar-inner
		{
			background-color:white; 
			height:130px; 
			margin:10px;
		}
		.main 
		{
			float:left;
			width:60%;
			height:150px; 
			background-color:blue;
		}
		.main-inner
		{
			background-color:white; 
			height:130px;
			margin:10px; 
		}
		.right-sidebar
		{
			float:right;
			width:20%;
			height:150px; 
			background-color:green;
		}
		.right-sidebar-inner
		{
			background-color:white; 
			height:130px;
			margin:10px;
		}
		.cleaner
		{
			clear:both;
		}
		.footer
		{
			height:60px; 
			background-color:yellow; 
			padding:1px;
		}
		.footer-inner
		{
			background-color:white; 
			height:40px;
			margin:9px;
		}
    </style>
  </head>
   
  <body>
    <div class="container">
		<div class="header">
			<div class="header-inner">
			</div>
		</div>
			
        <div class="left-sidebar">
            <div class="left-sidebar-inner">
                 
            </div>
        </div>
         
        <div class="main">
            <div class="main-inner">
                     
            </div>
        </div>
         
        <div class="right-sidebar">
            <div class="right-sidebar-inner">
             
            </div>
        </div>
         
        <div class="cleaner">
        </div>    
         
        <div class="footer">
            <div class="footer-inner">
             
            </div>
        </div>
    </div>
     
  </body>
</html>

In the above code, we apply some CSS properties to the HTML Elements. And below screenshot shows how it will be displayed with the three-columns, header and footer.

Three Column Layout With Header And Footer
Fig.5 – Three Columns Layout Design With Header And Footer Example Code.

How Can You Actually Apply These Layout To Your Web Page?

Here we creating a simple layout design to design a web page.

Example 6 – Three-Columns Layout Design with Content in the columns

<!DOCTYPE html>
<html>
  <head>
    <style>
		.container
		{
		}
		.header
		{
			text-align: center;
			color: blue;
        }
		.header-inner
		{
			background-color:white;
			margin:10px;
		}
		.left-sidebar
		{
			float:left; 
			width:20%; 
		}
		.left-sidebar-inner
		{
			background-color:white;
			margin:5px;
		}
		.main 
		{
			float:left;
			width:60%;
			
		}
		.main-inner
		{
			background-color:white; 
			margin:10px; 
		}
		.right-sidebar
		{
			float:right;
			width:20%;
		}
		.right-sidebar-inner
		{
			background-color:white; 
			margin:10px;
		}
		.cleaner
		{
			clear:both;
		}
		.footer
		{
			padding:1px;
		}
		.footer-inner
		{
			background-color:white; 
			margin:9px;
		}
    </style>
  </head>
   
  <body>
    <div class="container">
		<div class="header">
			<div class="header-inner">
				<h1>Elex Tutorial</h1>
			</div>
		</div>
			
        <div class="left-sidebar">
            <div class="left-sidebar-inner">
               <div>
				  <h4 style="color:darkcyan;">Learn CSS</h4>
					<ul>
					  <li>
						<h6><a href="http://elextutorial.com/learn-css/introduction-css-css-basics/">Introduction to CSS  | CSS Basics</a></h6>
					  </li>
					  <li>
						<h6><a href="http://elextutorial.com/learn-css/css-full-form-css-meaning/">CSS  Full Form | CSS  Meaning</a></h6>
					  </li>
					</ul>
				 </div>  
            </div>
        </div>
         
        <div class="main">
            <div class="main-inner">
				<h4 style="color:darkcyan;">Introduction</h4>
				<p style="color:orange;">In Elex Tutorial you can study about the programming language which is used to design a web pages. Languages like HTML, CSS, PHP, Java Script and many more.</p>
			</div>
        </div>
         
        <div class="right-sidebar">
            <div class="right-sidebar-inner">
				<img src="logo.jpg" width="100%" style="border:1px solid blue;">
            </div>
        </div>
         
        <div class="cleaner">
        </div>    
         
        <div class="footer">
            <div class="footer-inner">
				<div>
					Copyright &copy; 2015 &nbsp;<a href="http://elextutorial.com"><strong>IT TUTORIAL | ELECTRONICS TUTORIAL</strong></a>  | We Share Knowledge 
				</div>
            </div>
        </div>
    </div>
     
  </body>
</html>

In the above code, we apply some CSS properties to the HTML Elements. And below screenshot shows how it will be displayed the three-columns layout with content.

Three Column Layout With Content
Fig.6 – Full Three Column Layout Code with Content.
You can leave a response, or trackback from your own site.
Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!          Protected by Copyscape