Marshy

womble: Thanks for the reply. To get the look I was after I changed #menu to #menu { position:relative; float:left; background:#8e4b38; width:100px; height:400px; } This gives the desired effect.

I am trying to create a layout with a menu bar down the left side and 4 boxes arranged in a square next to it. I have attached an image of what the site currently looks like. I want the menu bar to extend to the bottom of the screen and the 4 boxes arranged as they are in my screenshot to the right of the menu. My code looks like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>phpBI</title> <style type="text/css"> <!-- body { margin: 1px; font-size:12pt; } a { color:white; } #ContentArea { position: absolute; border:1px solid black; width:99%; } #menu { position:absolute; background:#8e4b38; width:100px; height: 50px; } #block1 { position: relative; background:#9dce58; width:400px; height:200px; float:left; margin:20px; } #block2 { position: relative; background:#83a6c4; width:400px; height:200px; float:left; margin:20px; } --> </style> </head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="98" background="Images/banner.png"> <div align="right"> <img src="Images/Circles.png" width="316" height="98" alt="Circle"> </div> </td> </tr> <tr> <td height="40" background="Images/menu.png" style="vertical-align:middle"> <strong> <a href="#">Home</a> </strong> </td> </tr> </table> <div id="menu"> Menu </div> <div id="block1"> <div id="blockHeader">Block1</div> </div> <div id="block2"> Block2 </div> <div id="block2"> Block3 </div> <div id="block1"> Block4 </div> </body> </html> Can someone point out what I need to add/change to my CSS?

Thanks, vertical-align does the trick. Could you also tell me why I have a huge gap on the left side of my list?

Hello everyone. Im not very good at web design (I'm better at programming the logic ) and I need some help with a simple layout I am trying to create. I have created a simple layout and some CSS but for some reason the text is centered in the middle of the cell instead of at the top. I've been using Firefox and Firebug to try and get it how I want it but it's not working. Could someone take a look at the attached HTML and help me align the text and tidy up the HTML/CSS? Also, if anyone knows of a cleaner simpler way of creating this layout (say with divs) please tell me. Thanks in advance!! layout.html