Pages

Subscribe:

Ads 468x60px

Thursday, 8 September 2011

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

0 comments:

Post a Comment