I want to align these boxes straight horizontally <div id="blockcontainer"> <div id="blockone"></div> <div id="blocktwo"></div> <div id="blockthree"></div> </div> #blockcontainer{ width:960px; padding:15px; height:220px; display:block; } #blockcontainer #blockone{ width:310px; float:left; background:#000066; height:220px; } #blockcontainer #blocktwo{ width:310px; margin-left:325px; background:#000066; height:220px; } #blockcontainer #blockthree{ width:310px; float:right; background:#000066; height:220px; } HTML:
Just tested this in FF 2, IE 7 and IE6 and it works the way i think you want it to. Correct me if a am wrong. HTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> test for dp </title> <link rel="stylesheet" media="screen" href="style.css" type="text/css"> </head> <body> <div id="blockcontainer"> <div id="blockone"></div> <div id="blocktwo"></div> <div id="blockthree"></div> </div> </body> </html> Code (markup): CSS #blockcontainer{ width:960px; padding:15px; height:220px; display:block; } #blockone{ width:310px; float:left; background:#000066; height:220px; } #blocktwo{ width:310px; float: left; margin-left: 10px; background:#000066; height:220px; } #blockthree{ width:310px; float: left; margin-left: 10px; background:#000066; height:220px; } Code (markup):