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.