HasLayout concept explained - Learn how to exploit IE's „layout"  

What the hell is layout? Layout is an Internet Explorer proprietary concept that controls both size and position of elements. IE uses "layout" to reduce its processing needs. In modern browsers, like FFox, Safari and Opera each element is responsible for it's own size and position. In IE 6 and below this would cause extreme problems related to performance. That's why IE gives "layout" only to elements that really need it. Anyway, "layout" really affects CSS designs, so it's important to know how to deal with it.

What elements do have layout? Elements that have layout include: bodytable, tr, td, input, select, textarea, button, img, marquee, hr, inframe(don't use this, please :) ), object, applet

How to give layout to an element? Using one of these CSS properties: float: left/right; position: absolute; display: inline-block; width/height;

Problems caused by "layout": Elements with layout incorrectly size themselves: Let's say you have a div with width:10px; Write some text inside it and set it's size to 30px. Also set border: 1px solid black; In this situation the text should flow out of the div, but in IE the div incorrectly expands. This shows that IE uses width like a min-width.

Absolute positioned elements within a relative container: Let's say that you have some absolutely positioned elements inside a relatively positioned ancestor. In IE, instead of being positioned relative to the ancestor, these elements will get positioned relative to the viewport. This bug is caused by IE's internal "hasLayout" feature. Elements with relative position are not considered to have "layout". A simple solution for this bug would be to set a width or height, to force the element to have layout. Anyway, maybe sometimes you will not know the dimensions of the element, so you can use the following hack:

Recent article: CSS Articles
CSS Content? Using tables within the content of your page is a major no-no, the whole intent and purpose of CSS is to control the style of your page elements, this is done using an external stylesheet.

An external Stylesheet? External stylesheets give you the control of your whole website from one single file rather than trying to edit your whole websites CSS using global search and replace or by opening each page individually.

If you are new to this HTML malarkey then welcome, you have just embarked upon a new learning curve that does not take too long to master. Before the invention of CSS everything within a webpage used to be designed using tables.

Indeed there are still a lot of html editors out there that still use tables to format a pages content, one strong word of advice, get rid of that software and start again. Tables are not extinct within webpages but they should only be used for the purpose of presenting data.

Beginning CSS? I am not going to use this article to give you a whole list of tags and how to apply them, that information would be too easily ignored. There are thousands of well rounded websites available on the net today that can walk you through the first stages of CSS, the one I would recommend would be: W3Schools CSS intro this is a perfect place to start learning CSS, in the interests of parity and fairness I will also recommend What can be achieved using CSS .