I want the main section of my pages to be centered on the page, and I have that. But within, I want to be able to position the elements (such as a menu, actual content, etc.) so they will position within the main section. I'm having a hard time getting this done. Here is the code I have to this point...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Welcome </title><style>body{background-color:#dccfbf; margin-top:0px; text-align:center}#header{width:750px; border-left:1px solid black; border-right:1px solid black;border-bottom:1px solid black; padding:0}#content{width:750px; border-left:1px solid black; border-right:1px solid black; border-bottom:1px solid black; text-align:left; background-color: white;}#menu{width:175px; background-color:#A3CFFC; border:1px solid navy; position:relative; top:10px; left:10px}#menu ul{list-style-type:none; margin:0; padding:5px}</style></head><body><div id="header"><img src="../images/header.jpg"></div><div id="content"> <div id="maincontent">Welcome!</div> <div id="menu"> <ul> <li>About Us</li> <li>Directions</li> <li>Upcoming Events</li> </ul> </div></div></body></html>
I want the menu to be at the upper left of the white area with another column of text (main content) to be at the same vertical position, but obviously to the right of the menu section. Any ideas??? I'm sure I have some errors, so feel free to tear up my code. Thanks