align problem

Okay, so I am building a site for a friend, and I am running into a problem. The side bar is aligned right, but its lower than what I want it to be. Here is a screen shot: Please note the site is not finished. Example Here [img23.imageshack.us]

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>MAPPAREL</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="main">
<div id="top_bar">
<div class="container">
<p id="login"> <a href="users.html">Login</a> Ś <a href="users.html">Register</a></p>
<p id="twitter"> Stay in the know! <a id="twitter" href="twitteraccounthere">Follow us on twitter!</a></p>
</div>
</div>
<div id="header">
<div id="branding" class="container">
<p class="desc"><img src="banner.png"></p>
</div>
<div id="navigation">
<ul id="menu" class="container">
<li><a href="#">help</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">store</a></li>
<li><a href="#">collection</a></li>
<li><a href="#">about</a></li>
<li><a href="#">news</a></li>
<li><a href="#">home</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="posts">
<h2>New Site</h2>
<small>on October 5th 2009</small>
PARAGRAPH HERE
</div>
</div>
<div id="side_bar">
<img src="lacb.png"><br>
<a id="info" href="#">More Info...</a>
</div>
</div>
<div id="footer">
<div id="footer_content">
<div id="copyright">
<p>Copyright Š 2009. <br /> All Rights Reserved.</p>
</div>
</div>
<div id="links">
<ul>
<li><a href="#">Contact</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Jobs</a></li>
</ul>
</div>
</div></body>
</html>

CSS


body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, img, form, fieldset, blockquote { 
 margin:0px; padding:0px; border:0px; 
} body {
 font-family: Arial, sans-serif;
font-size: 12px;
 width: 900px; 
margin-right: auto;
margin-left: auto; 
}
.container {
width: 900px; 
margin-right: auto;
margin-left: auto; 
} 
p#login {
float: left; 
width: 50%;
}
p#twitter {
float: right; 
width: 50%; 
text-align: right;
} 
#top_bar {
overflow: hidden; 
}
#top_bar p {
font-size: 12px; 
color: #999999;
}
#top_bar a {
font-size: 12px; 
color: #0095FF;
} 
#top_bar {
overflow: hidden; 
background: url(topbar.png) repeat-x; 
padding-top: 7px; 
padding-bottom: 15px; 
width: 900px; margin: 0 auto;
}
ul#menu {
list-style: none; 
}
ul#menu li {
float: right; 
padding-right: 15px; 
}
ul#menu li a {
font-size: 12px; 
text-decoration: none; 
color: #0095FF;
}
#posts {
float: left; 
width: 650px; 
}
#side_bar {
float: right; 
width: 250px;
}
#side_bar a {
color: #0095FF; 
text-decoration: none;
align: right;
}
#content {
overflow: hidden;
} 
#posts h2 {
margin: 10px 0 0px 0; 
font-size: 22px; 
color: #0095FF;
overflow: hidden; 
background: url(topbar.png) repeat-x; 
padding-top: 35px; 
}
#posts p {
font-size: 12px; 
color: #0095FF;
}
#side_bar {
float: right; 
background: #d8ddd1; 
}

align problem

side bar is being very odd

cberry

cberry

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week