3-Column CSS Layout



This article will help you to create 3-column css web page using asp.net.

Step -1
-----------

Create a .css file and use the below code

*
{ padding: 0; margin: 0; }
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

#wrapper
{
margin: 0 auto;
width: 922px;
}

#header
{
color: #333;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 100px;
margin: 10px 0px 5px 0px;
background: #BD9C8C;
}

#leftcolumn
{
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 350px;
width: 195px;
float: left;
}

#content
{
float: left;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 350px;
width: 456px;
display: inline;
}

#rightcolumn
{
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 5px 0px;
padding: 10px;
height: 350px;
width: 195px;
float: left;
}

#footer
{
width: 900px;
clear: both;
color: #333;
border: 1px solid #ccc;
background: #BD9C8C;
margin: 0px 0px 10px 0px;
padding: 10px;
}

Step -2
--------------
Download default.aspx and refer the css in that page to see the output

Up Next
    Ebook Download
    View all
    Learn
    View all