http://web.nwe.ufl.edu/writing/help/web/authoring/html/css/div.html
So, I came out a page like this :
.....
#menu {width:150px; float:left; display:block;}
#content {margin-left:25px;margin-right:25px;margin-top:5px;display:block; float:left;}
.....
<DIV ID="header" title="Header Area">
.........
</DIV>
<DIV ID="menu" title="Menu Area">
.........
</DIV>
<DIV id="content" summary="Page Content"></A>
............
</DIV>
Unfortunately, this layout was no good if I have a table inside content. The table got pushed down. Or, a style was with position:relative, then I got big space.
Therefore, I added style float:left to the content area. Now IE were good, but Mozilla. So, I added third line to dismiss content float to left.
#menu {width:150px; float:left; display:block;}
#content {margin-left:25px;margin-right:25px;margin-top:5px;display:block; float:left;}
#menu+#content{float:none;margin-left:175px;}
It's good at IE 5.5, 6, Mozilla, Opera, Safari IE 5.2, but IE 5.0.
At this point, I realized this kind of hacking was useless.
Then I looked at http://www.htmlite.com/SD008.php. Maybe, I should try position:absolute.
So, I had
#menu {position: absolute;left: 0px; width:150px;}
#content {position: absolute;left: 175px; margin-top:5px;}
.
In order to backward compatible, I added
TD#menu {position: relative;}
TD#content {position: relative; padding-left:25px; padding-right:25px; padding-top:5px;}
.
I were happy at this point. I could get IE 5, IE 5.2, IE 5.5, IE 6, Mozilla, Safari 1.0 and 1.2 looking right.
Only Opera wouldn't expand table inside content to 100% in a very special case.
