A page layout using DIV’s are much more flexible than a table layout. However, I often went back to using tables because it seemed more stable across different browsers. After spending some time researching how to use DIV’s effectively, I came up with a list of basics I wish I’ve known before.

1. Is a container DIV not stretching accordingly to the size of content DIV’s?

The last DIV will make sure that containerdiv will stretch accordingly to the size of leftcolumn and right_column.

2. IE 6 3px gap When I set the leftcolumn and rightcolumn’s width to 250px, it looked as though IE6 is completely ignoring the fact that these DIV’s are floating. It turned out, IE 6 has a gap of width 3px and the contents of the rightcolumn gets pushed underneath the leftcolumn. http://www.positioniseverything.net/explorer/floatIndent.html

3. Peek-A-Boo bug in IE6 Now all the DIV’s are positioned where I want them. Surprise! It seems as though the contents of the DIV is hiding behind the background image in IE 6. You can sort of see it when you mouse over and try highlight it. Setting z-index won’t do the trick because there is no z-indexing in IE6. But do not worry. Once again, http://www.positioniseverything.net came to a rescue.

http://www.positioniseverything.net/explorer/peekaboo.html

His second solution of setting ‘position: relative;’ usually does the trick for me.

Happy Web Development!