en en en en en en en en en en en en en en en en en en en en en en en fr lv lv lv lv en en en en en en fa en en en
Classic web-page layout with HTML and CSS | Code Smart
Classic web-page layout with HTML and CSS
Posted on November 23, 2013 by Steve Barker
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:
Class Page Layout    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; }          Header         One   Two         Heading   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.         One   Two           Footer   Copyleft 2013
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:
This entry was posted in Techniques and tagged CSS, HTML, web-development by Steve Barker. Bookmark the permalink.
Leave a Reply Cancel reply
Your email address will not be published. Required fields are marked *
Proudly powered by WordPress