<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head> <title>Tableless Layout</title> <style type="text/css"> #wrapper { width: 780px; margin: auto; } #left { float: left; width: 200px; border: 1px solid red; } #right { float: right; width: 576px; border: 1px solid green; } </style></head><body><div id="wrapper"> <div id="left"> LEFT </div> <div id="right"> RIGHT </div> <br style="clear:both"/></div></body></html>
NOTE: I used 576px as the width for #right. This is to account for the 4px of border (1px on left and right of both columns) so the math is 200 + 576 + 4 = 780.Keep this in mind. You will always have to account for borders, padding, and margins. Everything must be equal or less then the wrappers width.