You are here:Home » Web Designing » How to Design 2 Column Layout for Website

How to Design 2 Column Layout for Website

Mind it or whatever,

Avoid HTML table to design the web page layout,

Use of table in web page designing very bad concept at present. 

While talking about past, there we used to use Microsoft Frontpage  or other various tools to create web page layout. At present there are lots of web designing tools but before going through them you need to understand how the web page layout can be created.

Before starting of coding section you need to understand what is HTML and how to use to create webpage or website.  Simple Web Page Design Example

Now come to the topic
Question may arise,
 I think 1 question definitely comes in your mind, by avoiding tables how to design the layout? 
My Answer is Yes, you can create web page layout by avoiding html tables. By using the html special tag called <div>.
Now what kind of webpage layout you are thinking to design, Here i have the example,
Web Page Layout - 2 Column
Web Page Layout - 2 Column
Conditions may apply like this,
  1. i need post-body at left side. 
  2. i need sidebar at right side.
  3. i need width 960px or 100%.
  4. i need page layout or margin-left 15%; 
  5. i need post-body border with red color.
  6. i need sidebar border with blue color and etc. 
These are the few conditions to design simple layout design of web page but while designing complex project there may occur lots of conditions, but not to worry about those problems and conditions if you understand this you will solve them all. 

HTML Code,

<div class='am-wrap'>
 <div id='am-body'>
           <!-- Place Text or Posts -->
 <div id='am-right'>
                  <!-- Place widgets or any thing what you want--> 
Now to Decorate your web page layout you need to use CSS (Cascading Style Sheet).
CSS is very simple to learn and if you start learn CSS then there is no way to out, means that you'll love that.

CSS Code,

<style type="text/css"> .am-wrap{ margin-left: 15%; width: 960px; } #am-body{ margin: 0; padding: 10px; width: 600px; border:solid 1px #f00; float: left; } #am-right{ margin: 0; padding: 10px; width: 312px; border: solid 1px #00f; float:right; } </style>
Finally you are done with this, if you check output on web browser you will love that one and This the first post about web designing we will looking forward to help you in the matter or web designing so keep visiting us, and if you have any questions left comment or message me by using contact us form.

Thanks,........ Happy Web Designing.