I'm working on a website for my dad (first web design client and all that mess...) and I'm having trouble getting a list to appear as I want it to. It appears in the "more-links" div, but gets shifted a good 30px to the right, instead of being contained inside the div (and the divs around it).
The HTML code:
Code:
<!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>Dr. Beth's Gluten-Free</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<!--Banner goes here-->
<!--Start navbar-->
<div class="navbar">
<ul id="nav">
<li id="nav-home"><a href="#">Home</a></li>
<li id="nav-tips"><a href="#">Tips of the Day</a></li>
<li id="nav-living"><a href="#">Gluten-free Living</a></li>
<li id="nav-foods"><a href="#">Gluten-free Foods</a>
<li id="nav-recipes"><a href="#">Gluten-free Recies</a></li>
<li id="nav-regional"><a href="#">Regional Suggestions</a></li>
<li id="nav-videos"><a href="#">Videos</a></li>
<li id="nav-resources"><a href="#">Other Resources</a></li>
</li></ul>
</div>
<!--End navbar-->
<!--Main content area-->
<div class="homecontent">
<div class="main-sidebar"> <!--Start main-sidebar-->
<span class="pullquote"> <!--Start pullquote-->
Did you know that noodles are gluten-free? Try some today!<br>
<span class="subpullquote">
More tips <a href="#">here</a>
</span><br>
<img src="images/Facebook_button.jpg" class="fb-button">
<img src="images/twitter_button.jpg" class="twitter-button">
</span> <!--/pullquote-->
<div id="more-links">
<ul id="side">
<li id="side-need"><a href="#">Do you need to live gluten-free?</a></li>
<li id="side-benefits"><a href="#">Benefits of going gluten-free</a></li>
<li id="side-something"><a href="#">Something else could go here</a></li>
</ul>
</div><!--End of more-links-->
<br style="clear:both" />
</div> <!--End of main-sidebar-->
<div class="homecontent-right"> <!--Text area and Beth's biography-->
<p>This site will help you on your journey to live a gluten-free lifetsyle as quickly and completely as you would like. </p>
<p>We will help you focus on what you can eat with tips on how to prepare and enjoy yourself.</p>
<p> This sort of thing continues on and continues on blah blah blah </p>
<p>Naturally, I won't be writing this copy (or at least, I hope not). That seems like Beth's job. Oh, speaking of Beth, there's going to be a biography of her in this main content area. It'll be below all of this text, and line up against the bar over there on the left. Oh wait, that bar doesn't exist yet. Let me go make it...</p>
<p>Damn, now that bar exists, but isn't working properly... I get to work on that for awhile now. Woopie!!!I also just generally need more text to make sure that everything is wrapping correctly. This should be good enough, methinks.</p>
</div>
<br style="clear:both" />
</div>
<!--End Main content area-->
<br style="clear:both" />
</div> <!--End container-->
</body>
</html>
And the CSS:
Code:
@charset "UTF-8";
/* CSS Document */
body {
background-color:#808259;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
list-style-type:none;
list-style:none;
}
p {
margin:0px;
text-indent:20px;
line-height:20px;
}
.container {
background-color:#b2b580;
width:950px;
height:auto;
margin-left:auto;
margin-right:auto;
float:none;
}
/*Use this class if using a rounded top with images
.roundtop {
background:url(images/ContainerCorner_TopRight.jpg) no repeat top right
}
*/
.navbar {
background:inherit;
width:200px;
height:auto;
padding-left:2px;
padding-top:5px;
}
#nav {
margin:0;
padding:0;
background:#808259;
float:left;
width:200px;
border:1px solid #42432d;
border-width:1px 0;
border-right:1px;
border-left:1px;
border-bottom:none;
list-style:none;
}
#nav li {
display:inline;
padding:0;
margin:0;
}
#nav a:link,
#nav a:visited {
color:#000;
background:#b2b580;
padding:14px 25px 10px 25px;
float:left;
width:150px;
border-bottom:1px solid #42432d;
border-left:1px solid #42432d;
border-right:1px solid #42432d;
text-align:center;
font-size:16px;
}
#nav li:first-child a {
border-top::1px solid #42432d;
}
#more-links {
margin-left:0px;
padding:0;
float:left;
width:220px;
list-style:none;
}
#side li{
display:inline;
padding:0;
margin:0;
}
#side a:link,
#side a:visited {
color:#000;
background:#b2b580;
padding:14px 0px 9px 0px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #694e1c;
float:left;
width:220px;
text-align:center;
font-size:16px;
}
.pullquote {
padding: 10px;
float: left;
width: 200px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right:15px;
border-top-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #694e1c;
border-bottom-color: #694e1c;
font-size: 16px;
text-align: center;
line-height: 24px;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: normal;
}
.fb-button {
width:90px;
height:27px;
float:left;
padding-right:2px;
}
.twitter-button {
width:90px;
height:26px;
float:left;
padding-left:3px;
}
.subpullquote {
padding-top: 0px;
font-size: 10px;
text-align: center;
line-height: 20px;
font-family: Arial, Helvetica, sans-serif;
font-style:normal;
font-weight: normal;
}
.main-sidebar {
width:220px;
height:auto;
float:left;
}
.homecontent-right {
width:470px;
height:auto;
position:relative;
left:5px;
float:left;
}
.homecontent {
width:730px;
height:500px;
position:relative;
top:0px;
left:5px;
padding-left:5px;
padding-top:5px;
float:left;
}
(I also uploaded the .CSS file)
If you have any additional comments on the code or layout, those would be greatly appreciated, though my main focus here is dealing with this particular issue.
Thank you!
Before you post, read our: 
Your css is not set up right. I'll pm you since I'm pretty bored right now
