How the general web designer creates HTML pages? Usually web designer uses some designer tool like Macromedia DreamWeaver or Microsoft FrontPage for the HTML page creation. It is very convenient approach and created HTML page looks fine. Sometimes web designer even does not look into the HTML code generated by smart tools. But it is worth to review how the page looks inside.
As for me, HTML code generated by various tools looks not very good. It can be described as "table in table in table... and all this in one more table". It is a well known practice of creating HTML page layout. Tables are used for HTML elements positioning - it is not bad. But very often web designers overuse tables. Especially if various automated designers are used. The HTML page becomes "heavy". It "weights" considerable amount of kilobytes. It is nearly impossible to understand such code or modify it without the appropriate designer tool.
How to avoid tables overusing? Does any alternative to tables exist? Answer is YES. You can create lightweight pages with the same layout using the CSS. You will need to use two CSS properties: float and clear. Lets review both of them.
Float CSS property specifies on which side of the block element the content will flow. Float property has default none value. It means that the element is not floated and it displays where it appears in the text. Other values are left and right. The left value means that the content flows to the right of the block element and the element is floated to the left. The right value means that the content flows to the left of the block element and the element is floated to the right.
Clear CSS property specifies whether the block element allows earlier floating elements on its left side, right side, or both, so that the next content displays past the floating elements. The following values can be assigned to the Clear CSS property:
How those CSS properties do work? Lets review practical sample. Assume that you want to create page with header, left navigation bar, right content box and footer. That task can be accomplished using 5 DIV elements:
<html>
<head>
<style>
DIV.Header {width:100%; text-align:center}
DIV.Container {width:100%}
DIV.Navigation {width:23%; float:left}
DIV.Content {width:73%; float:right}
DIV.Footer {width:100%; clear:both; text-align:center}
</style>
</head>
<body>
<div class="Header">
...
</div>
<div class="Container">
<div class="Navigation">
...
</div>
<div class="Content">
...
</div>
</div>
<div class="Footer">
...
</div>
</body>
</html>
That's all. Just try to create that simple page with Notepad or any other simple text editor and you will see how it works. Please note that you need to specify Width, Float and Clear CSS properties through the style attribute (for example: style="width:23%; float:left"). If you will create more complex HTML page using that technique and move style definitions to external ".CSS" file, than you will notice considerable reduction of HTML code size and see that your HTML code become more clear and "understandable". The same technique can be used to create page that consists of more than two columns.
You can review working CSS tutorial sample here.
Proposed approach works fine for Internet Explorer browser as well as for Mozilla-family browsers.