You are here:Home » Web Designing » 3 Column Website Layout Design

3 Column Website Layout Design

The previous post is 2 column website layout design, there we talked about conditions and solutions now today i wanna talk about 3 column website layout design by avoiding tables. Here we are using special tag of HTML called as <div>.

Keep in mind to design layout we always use HTML tags and elements, so if you wanna decorate your design you need to know about CSS.

The basic you need to know to design website is HTML (HyperText Markup Language), CSS (Cascading Style Sheet), JavaScript or other various client side scripting languages.

Now time to go inside the topic 3 column website layout design,

The condition may apply like below figure, if you wanna get your website design layout like below figure then you have to work on the basis of the conditions

  1. Need left sidebar. 
  2. Need post-body in middle.
  3. Need right sidebar and etc.  
3 Column Website Design
3 Column Website Design Layout


<div class='am-wrap'> <div id='header'>AM- HEADER</div>
<div id='am-left'> <!-- Your Text --> </div> <div id='am-body'> <!-- Your Text --> </div>
<div id='am-right'> <!-- Your Text --> </div>


<style type="text/css"> .am-wrap{ max-width:1230px; margin-left: 5%;  } #am-body{ margin: 0; padding: 10px; width: 600px; border:solid 1px #f00; float: left; } #am-left{ margin: 0; padding: 10px; width: 250px; border: solid 1px #00f; float:left; } #am-right{ margin: 0; padding: 10px; width: 312px; border: solid 1px #00f; float:right; } #header{ text-align: center; font-size: 46px; } </style>