Classic web-page layout with HTML and CSS

I met up with a great friend of mine the other week for our monthly “tech-talk” session, in which we share things we’ve learned or heard about in the IT world. We hold these sessions in order to give ourselves the illusion that we are actually managing to keep up with the ever-changing world of IT, and of course to enjoy some good banter and real ale.

We started talking about the layout of web-pages, and why using tables for anything other than an actual table is a bad idea. (If you don’t know why it’s a bad idea, ask someone with a visual impairment for their thoughts on the matter…)

I promised to share with my mate how I would go about creating a classic header/columns/footer web-site using only divs and CSS. Here is the result:

<html>
    <head>
        <title>Class Page Layout</title>
        <style type="text/css">
            body {
                font-family:'Courier New';
                font-size:1em;
                background-color:gray;
            }

            ul {
                margin:0px;
            }

            #container {
                width:800px;
                margin-left:auto;
                margin-right:auto;
            }

            #header {
                height:50px;
                padding:10px;
                margin:0px;
                background-color:#FFFF66;
            }

            #mainContent {
                height:400px;
            }

            #leftSection {
                background-color:#99FFFF;
                width:25%;
                float:left;
                height:100%;
            }

            #centreSection {
                background-color:#00FF00;
                width:50%;
                float:left;
                height:100%;
            }

            #rightSection {
                background-color:#99FFFF;
                width:25%;
                float:left;
                height:100%;
            }

            #footer {
                clear:both;
                height:50px;
                padding:10px;
                margin:0px;
                background-color:#FFFF66;
            }

            #footerLeft {
                float:left;
            }

            #footerRight  {
                float:right;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header">Header</div>
            <div id="mainContent">
                <div id="leftSection">
                    <ul>
                        <li>One</li>
                        <li>Two</li>
                    </ul>
                </div>
                <div id="centreSection">
                    <h1>Heading</h1>
                    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
                </div>
                <div id="rightSection">
                    <ul>
                        <li>One</li>
                        <li>Two</li>
                    </ul>
                </div>
            </div>            
            <div id="footer">
                <div id="footerLeft">Footer</div>
                <div id="footerRight">Copyleft 2013</div>
            </div>
        </div>
    </body>
</html>

You can view the actual page here.

Although you’d probably use something like Bootstrap to achieve this kind layout these days, especially if you wanted it to render nicely on mobiles, it’s good to be able to build this kind of layout from scratch as well. The secret to getting it working is in the floats, and if you use the Web Developer toolbar by Chris Pederick to turn off CSS as I mentioned in a recent post about Firefox add-ons, you can see that the underlying HTML is a simple set of divs, one after the other.

I’ve tested this layout in the following browsers and all looks good:

  • Firefox
  • Chrome
  • IE10
  • IE9
  • IE8
  • IE7
  • Opera
  • Safari (for Windows)

Leave a Reply

Your email address will not be published. Required fields are marked *