On my home screen with a different screen resolution it looks fine, but on my work computer it's messed up.
I want the about us box to be left aligned with the menu and not go past it, and the same for the advertising box to be right aligned.
I used margin-left: 40px; but it messes up for different screen sizes.
Any ideas? Thank you
PHP Code:
<body>
<div id="header" class="container">
</div>
<div id="menu" class="container">
<ul>
<li><a href="index.html" accesskey="1" title="">Home</a></li>
<li class="current_page_item"><a href="aboutus.html" accesskey="1" title="">About</a></li>
<li><a href="#" accesskey="2" title="">List Your Business</a></li>
<li><a href="#" accesskey="3" title="">Search Businesses</a></li>
<li><a href="#" accesskey="4" title="">Contact Us</a></li>
<li><a href="#" accesskey="5" title="">Sitemap</a></li>
<li><a href="login.php" accesskey="6" title="">Login</a></li>
</ul>
</div>
<div id="content2" class="container">
<center><h2>About Us</h2></center>
<p><h3>Coming Soon...</h3></p>
</div>
<div id="sidebar3">
<div>
<center><h2>Sponsors</h2></center>
<p><center><img src="images/ad.jpg"></center></p>
</div>
</div>
</div>
<div id="footer">
Code:
html, body {
}
body {
margin: 0px;
padding: 0px;
background-image: url(images/clouds.jpg);
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #8C8C8C;
}
h1, h2, h3 {
margin: 0;
padding: 0;
text-transform: uppercase;
font-weight: 300;
font-family: 'Open Sans Condensed', sans-serif;
color: #2D2D2D;
}
h2 {
padding: 0px 0px 30px 0px;
font-size: 2.50em;
}
p, ol, ul {
margin-top: 0px;
}
p {
line-height: 180%;
}
strong {
}
a {
color: #861004;
}
a:hover {
text-decoration: none;
}
a img {
border: none;
}
img.border {
}
img.alignleft {
float: left;
}
img.alignright {
float: right;
}
img.aligncenter {
margin: 0px auto;
}
hr {
display: none;
}
/** WRAPPER */
#wrapper {
}
.container {
width: 1200px;
margin: 0px auto;
}
.clearfix {
clear: both;
}
/** HEADER */
#header {
height: 10px;
}
/** MENU */
#menu {
height: 50px;
background: #000000;
}
#menu ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
display: inline-block;
}
#menu a {
display: block;
padding: 0px 30px 0px 30px;
line-height: 50px;
text-decoration: none;
text-transform: uppercase;
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 18px;
font-weight: 200;
color: #FFFFFF;
border: none;
}
#menu a:hover, #menu .current_page_item a {
background: #D1D1D1;
text-decoration: none;
color: #000000;
}
#menu .current_page_item a {
}
#menu .last {
border-right: none;
}
/** PAGE */
#page {
overflow: hidden;
padding: 50px 0px 40px 0px;
}
/** CONTENT */
#content {
float: left;
width: 620px;
background: #FFFFFF;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
}
#content p {
margin-left: 5px;
margin-right: 5px;
color: #000000;
}
#content2 {
float: left;
width: 900px;
background: #FFFFFF;
margin-left: 40px;
margin-top: 20px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
}
#content3 {
float: left;
width: 1200px;
background: #FFFFFF;
margin-left: 40px;
margin-top: 20px;
}
#content3 h2 {
text-align: center;
}
/** SIDEBAR 1 */
#sidebar1 {
float: left;
width: 280px;
margin-right: 10px;
}
#sidebar1 #box1 {
margin-bottom: 30px;
background: #BCD2EE;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
}
#sidebar1 #box1 a {
font-size: 14px;
text-decoration: none;
color: #000000;
margin-left: 5px;
margin-right: 5px;
}
#sidebar1 #box1 li {
margin-left: 5px;
margin-right: 5px;
}
#sidebar1 #box1 h2 {
margin-left: 5px;
margin-right: 5px;
text-align: center;
}
/** SIDEBAR 2 */
#sidebar2 {
float: right;
width: 280px;
background: #BCD2EE;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
}
#sidebar2 h2 {
text-align: center;
}
#sidebar2 p {
margin-right: 3px;
margin-left: 3px;
}
#sidebar3 {
float: right;
width: 280px;
background: #BCD2EE;
margin-right: 40px;
margin-top: 20px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
}
/* Footer */
#footer {
overflow: hidden;
padding: 10px 0px 10px 0px;
background: #000000;
position: absolute;
bottom: 0;
width:100%;
}
#footer p {
text-align: center;
font-size: 16px;
}
#footer a {
}
/* List style 1 */
ul.style1 {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.style1 li {
padding: 10px 0px 15px 0px;
}
ul.style1 .first {
padding-top: 0px;
border-top: none;
}
/* List style 2 */
ul.style2 {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.style2 li {
padding: 25px 0px 15px 0px;
border-top: 1px solid #E6E7DC;
}
ul.style2 .first {
padding-top: 0px;
border-top: none;
}
ul.style2 h3 {
padding: 0px 0px 10px 0px;
font-size: 1.50em;
}
ul.style2 h3 a {
color: #101010;
}
ul.style2 a {
text-decoration: none;
}
ul.style2 a:hover {
text-decoration: underline;
}
/* List style 3 */
ul.style3 {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.style3 li {
padding: 20px 0px 20px 0px;
border-top: 1px solid #E6E7DC;
}
ul.style3 p {
margin: 0px;
padding: 0px;
}
ul.style3 img {
float: left;
margin-top: 3px;
margin-right: 20px;
}
ul.style3 .posted {
padding: 10px 0px 10px 0px;
font-size: 8pt;
color: #A2A2A2;
}
ul.style3 .first {
padding-top: 0px;
border-top: none;
}
.link-style {
display: inline-block;
margin-top: 20px;
padding: 7px 20px;
background: #0C73D4;
border-radius: 5px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
}
Before you post, read our: 
