Hi, I have tried to place the elements as you suggested and the final layout looks like below. I would suggest using tables to place elements on the page, that gives you more control on positioning them as you like. And the code for this is- HTML: <!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>Preventive Law Reporter</title> <link href="new.css" rel="stylesheet" type="text/css"> </head> <body class="column"> <div id="container"> <div id="header"> <centre> <p id="pagetitle">Preventive Law Reporter</p> </centre> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tbody><tr> <td ><img src="images/scales-preventive.gif" alt="Scales of Justice"> </td> <td><img src="images/scales-preventive.gif" alt="Scales of Justice"> </td> </tr> </tbody></table> <!-- end #header --></div> <div id="sidebar1"> <table width="200" border="0" cellpadding="0" bgcolor= "#8999bb"> <tbody><tr height="35px"> <td height="35px"><a href="#" target="_self"> Login</a></td> </tr> <tr height="35px"> <td height="35px"><a href="#" target="_self"> Research Services</a></td> </tr> <tr height="35px"> <td height="35px"><a href="#" target="_self"> Testimonials</a></td> </tr> <tr height="35px"> <td height="35px"><a href="#" target="_self"> Links</a></td> </tr> <tr height="35px"> <td height="35px"><a href="#" target="_self"> Subscribe</a></td> </tr> <tr height="35px"> <td height="35px"><a href="#" target="_self"> Renew</a></td> </tr> </tbody></table> <br> <table width="200" border="1" > <tbody><tr> <td><span class="editor">Contact Us:<br> Email:<br> Telephone:<br> Fax:<br> Mail:<br><br> </span></td> </tr> </tbody></table> </div> <div id="mainContent"> <table border="0" width="680px" cellpadding="5" cellspacing="0"> <tbody><tr> <td valign="top"><br> <span class="content">Main content </span> </td> </tr></tbody></table> <!-- end #mainContent --> </div> <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat"> <div id="footer"> <p> Footer - Preventive Law Reporter</p> <!-- end #footer --></div> <!-- end #container --></div> </body></html> CSS: @charset "utf-8"; body { font: 100% Times; background: #fff; margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */ padding: 0; text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */ color: #000000; } a:link { color: #FFF; text-decoration: none; } .column #container { width: 900px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */ background: #FFFFFF; margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */ border: 1px solid #000000; text-align: left; /* this overrides the text-align: center on the body element. */ } .column #header { background: #fff; padding: 0 ; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */ } .column #sidebar1 { float: left; /* since this element is floated, a width must be given */ width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */ padding: 0; color: #FFF; } .column #sidebar1 table tr td { margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */ padding: 0px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */ font-family: "Times New Roman", Times, serif; font-size: 14px; font-weight: bold; } .column #mainContent { margin: 0 0px 0 0px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */ padding: 0px 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */ } .content { font-family: "Times New Roman", Times, serif; font-size: 14px; font-style: normal; color: #000; text-align: left; } .column #footer #pagetitle{ padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */ background:#fff; } #pagetitle{ margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */ padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */ font-family: "Times New Roman", Times, serif; font-size: large; font-weight: bold; text-align: center; } .column #footer p { margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */ padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */ font-family: "Times New Roman", Times, serif; font-size: small; font-weight: bold; text-align: center; } .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */ clear:both; height:0; font-size: 1px; line-height: 0px; } .editor { font-family: "Times New Roman", Times, serif; font-size: 9px; font-style: normal; color: #000; } Regards, Niharika Gupta
... View more
AdChoices