A better approach, which will work consistently on most modern browsers (including IE and Mozilla) and will not break, would be to use relative positioning instead of floating elements.
Set the body element as a relative-position element. This will set the body as the positioning reference for the other elements. Then simply define three absolute-position layers with the desired widths and horizontal locations from the edge of the main body.
I used relatively lengths (e.g., 20%) since this will allow for resizing, but you can use pixel values for precise control if you want to maintain a fixed document size.Code:<html> <head> <title>CSS Table Test</title> <style type="text/css"> body { position: relative; } #left { position: absolute; left: 0%; width: 20%; background-color: #CCCCCC; } #center { position: absolute; left: 25%; width: 40%; background-color: #AAAAAA; } #right { position: absolute; left: 70%; width: 30%; background-color: #999999; } </style> </head> <body> <div id="left"> Left Content Here </div> <div id="center"> Center (or Main) Content Here </div> <div id="right"> Right Content Here </div> </body> </html>
dmeister