Layouting Nightmare

[clonetrooper9494]

I have been trying to add a side bay to my site, and it is ruining the layout of everything! I am trying to figure out how to stop the blog posts from being pushed down the page... am I not adding in the side bars correctly? Should I use float:left for the side bar? What is causing this to happen?Any help or suggestions would be appreciated.EDIT:here is the source you should need to look at:(I updated the page, so this was the original code of the page)

<div class="sidebar_container" style="border:1px solid red;float:left;height:100%;margin-left:5px;margin-top:3px;width:175px;">  <div class="sidebar_group" style="border:1px solid grey;width:165px;margin-bottom:15px;">	<div class="sidebar_title" style="border-bottom:1px solid grey;text-align:center;">	  Account	</div>	<div class="sidebar_links">	  <p><a href="http://clonedrone.com/account.html">Edit Profile</a></p>	  <p><a href="http://clonedrone.com/~clonetrooper9494/profile.html">View Profile</a></p>	  <p>Messages</p>	  <p><a href="http://clonedrone.com/~clonetrooper9494/blog.html">View Blog</a></p>	  <p><a href="http://clonedrone.com/~clonetrooper9494/blog/post.html">Post New Blog</a></p>	</div>  </div>  <div class="sidebar_group" style="border:1px solid grey;width:165px;margin-bottom:15px;">	<div class="sidebar_title" style="border-bottom:1px solid grey;text-align:center;">	  TITLE	</div>	<div class="sidebar_links">	  <p>Link 1</p>	  <p>Link 2</p>	  <p>Link 3</p>	  <p>Link 4</p>	</div>  </div></div><div style="margin-left:190px;border:1px solid black;"><style>div.wrapper{padding-left:5%;}div.bfooter{width:100%;padding-top:3px;padding-bottom:3px;clear:both;text-align:center;border-top:1px solid gray;}div.post{border:1px solid gray;padding-left:0px;float:left;clear:left;width:95%;}div.title{border-bottom:1px solid gray;text-align:center;/* height:15px; */padding:0;margin:0;width:100%;/* width:982px; OLD WIDTH*/}div.info{/* width:250px; */width:35%;padding:0;margin:0;float:left;}div.content{border-left:1px solid gray;/* width:700px; */width:64%;padding:3px;margin-left:35%;/* max-height:500px; REMOVED*/overflow:auto;}div.spacer{height:45px;width:100px;clear:both;}</style><script>function go_go(){x = document.getElementById('topic94');document.location.href="http://clonedrone.com/~clonetrooper9494/blog/archives/" + x.value + ".html";}</script><h1>clonetrooper9494's Blog</h1><p>  2/2 blogs displayed by clonetrooper9494 from archives.<select id="topic94">  <option value="general">General</option>  <option value="Site+Updates" BOOM>Site Updates</option></select><input type="button" value="Go" onclick="go_go()"></p><p><a href="http://clonedrone.com/~clonetrooper9494/blog/post.html">Post New Blog</a></p><p><div class="wrapper">  <div class="post">	<div class="title">	  <h2><a href="http://clonedrone.com/~clonetrooper9494/blog/February-2-2009/Site+Updates.html">Taken A Break, Back to work!</a></h2>	</div>	<div class="info">	 <p style="text-align:center;">	  <a href="http://clonedrone.com/~clonetrooper9494/profile.html">	  <img src="http://clonedrone.com/images/spinning_square.gif" class="avatar" border="0">	 </p>	  <p style="text-align:center;">		clonetrooper9494</a>	  </p>	  <p>		<a href="http://clonedrone.com/~clonetrooper9494/blog/id-5.html">		Blog Post #5		</a>	  </p>	  <p>		February 2, 2009 - 07:10:05 pm	  </p>	</div>	<div class="content">	  CONTENT</div>	<div class="bfooter">	  FOOTER  </div>  <div class="spacer"> </div>  <div class="post">	<div class="title">	  <h2><a href="http://clonedrone.com/~clonetrooper9494/blog/January-15-2009/Site+Updates.html">The Site's Status</a></h2>	</div>	<div class="info">	 <p style="text-align:center;">	  <a href="http://clonedrone.com/~clonetrooper9494/profile.html">	  <img src="http://clonedrone.com/images/spinning_square.gif" class="avatar" border="0">	 </p>	  <p style="text-align:center;">		clonetrooper9494</a>	  </p>	  <p>		<a href="http://clonedrone.com/~clonetrooper9494/blog/id-1.html">		Blog Post #1		</a>	  </p>	  <p>		January 15, 2009 - 03:50:59 pm	  </p>	</div>	<div class="content">	  CONTENT	</div>	<div class="bfooter">	  FOOTER	</div>  </div>  <div class="spacer"> </div></div></p></div>

It is a bit messy though...

[Synook]

Code? Make sure the width of your content + sidebar doesn't exceed your actual page width. If you want a fluid-width layout, things get a bit interesting. I made one a while ago just to demonstrate how weird it can get http://www.aspektas.com/blog/two-column-eq...ht-fluid-layout

[clonetrooper9494]

I think I understand it, I won't copy your code, but I will adopt it. Very interesting how you do that.I solved my code thoughWhen I put overflow:auto; in the wrapper div of my blog posts, the posts jump up to the top of the page.I am not sure why this problem happened in the first place though, could somebody explain it too me?