Header Level 2
Home of nazmulweb.com | News Page of nazmulweb.com
| For easy understanding HTML,CSS and many more
How do you make two column layout easily
CSS Code
body, html {
background:#717171 none repeat scroll 0%;
margin:0pt;padding:0pt;color:#000000;
}
#wrapper {
background:#9999CC none repeat scroll 0%;
margin:0pt auto;width:750px;
}
#header {
background:#DDDDDD none repeat scroll 0%;
}
#header h1 {
margin:0pt;padding:5px;
}
#nav {
background:#CC9999 none repeat scroll 0%;
padding:5px;
}
#nav ul {
list-style-image:none;list-style-position:outside;
list-style-type:none;margin:0pt;padding:0pt;
}
#nav li {display:inline; margin:0pt;padding:0pt;}
#main {
background:#99CC99 none repeat scroll 0%;
float:left; width:70%;
}
#main h2, #main h3, #main p {padding:0pt 10px;}
/*SIDEBAR */
#sidebar {
background:#9999CC none repeat scroll 0%;
float:right; width:30%;
}
#sidebar ul {margin-bottom:0pt;}
#sidebar h3, #sidebar p {padding:0pt 10px 0pt 0pt;}
/*FOOTER */
#footer {
background:#CCCC99 none repeat scroll 0%;clear:both;
}
#footer p {margin:0pt; padding:5px;}
And if you apply the above css to the following part of html, you wil get the above
layout easily
HTML Code
<body>
<div id="wrapper">
<div id="header">
<h1>
Simple 2 column CSS layout</h1>
</div>
<div id="nav">
<ul>
<li><a href="#">Page 1 </a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Page 5</a></li>
</ul>
</div>
<div id="main">
<h2>
Column 1</h2>
<p>
<a href="/">Home of nazmulweb.com</a> | <a href="/news/Default.aspx">
News Page of nazmulweb.com</a> | <a href="http://www.w3schools.net/">
For easy understanding HTML,CSS and many more</a></p>
<h3>
Header 3 Tag</h3>
<p>
Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula.
Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam.
Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus
convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus
ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante
at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo
massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit.</p>
<p>
Maecenas eu velit nec magna venenatis consequat. In neque. Vivamus pellentesque,
lacus eu aliquet semper, lorem metus rhoncus metus, a ornare orci ante a diam. Nunc
sem nisl, aliquet quis, elementum nec, imperdiet in, wisi. Proin in lorem. Etiam
molestie diam eget ante. Morbi quis tortor id lacus mollis venenatis. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Aliquam vel orci sit amet tellus mollis
eleifend. Donec urna diam, viverra eget, ultricies gravida, ultrices eu, erat. Proin
vel arcu. Sed diam. Cras hendrerit arcu sed augue. Sed justo felis, luctus a, accumsan
in, tincidunt facilisis, libero. Phasellus eu eros.</p>
</div>
<div id="sidebar">
<h3>
Column 2</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
<div id="footer">
<p>
Footer</p>
</div>
</div>
</body>
Probably you have noticed in two column layout we have two divs named as "main"
and "sidebar". The main div contains your text whereas sidebar contains the links.
The other divs are "header" and "footer". Header contins the site title and naviagetion
bar and you cna put the copyright notice, address or links. All divs are wrapped
by a wrapper.