Wordpress sidebar problem

The ste is the football 1 in my link.

The problem has come around when i added the poll and tried to change a few things around.

It will be hard to explain how i want it to look so ive put a basic picture below and also the code, could someone help me find the problem(s) please

Thanks

<!-- begin sidebar -->

<div id="sidebar">

	<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : ?>
	
	<script type="text/javascript"><!--
google_ad_client = "pub-";
/* 300x250, created 08/02/08 */
google_ad_slot = "6358193074";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>




	<div class="sideleft">

	<div class="posts"
<?php if (function_exists('vote_poll') && !in_pollarchive()): ?>
<li>
   <h2>Polls</h2>
   <ul>
      <li><?php get_poll();?></li>
   </ul>
   <?php display_polls_archive_link(); ?>
</li>
<?php endif; ?>	
</div></div>

	<div class="sideright">
	
		<div class="posts">
		<h2>Categories</h2>
			<ul>
				<?php wp_list_categories('sort_column=name&title_li='); ?>
			</ul>
		</div>
<br/>



	
	<div class="posts">
	<h2>Latest Headlines</h2>
		<ul>
			<?php get_archives('postbypost', 10); ?>
		</ul>
	</div>

	
		

	<div class="sideleft">
		<div class="posts">
		<h2>Archives</h2>
			<ul>
				<?php wp_get_archives('type=monthly'); ?>
			</ul>
	</div>
		</div>


	<div class="sideright">
	
		<div class="posts">
		<h2>Related Sites</h2>
			<ul>
				<a href="http://www.247football.org">Football Forums</a><br/>
                                <a href="http://www.gfdb.com">Football database</a><br/>
                                <a href="http://sport-desktops.com" title="Free sport desktop wallpapers for computer background">Sport wallpapers</a><br/>
                                <a href="http://www.butterstone.org/category/football-soccer">Football / Soccer videos</a><br/>
                                <a href="http://www.onlinefooty.co.uk" title="Online Football">Online Football Games</a> 

			</ul>
		</div>
	
		<div class="posts">
		<h2>Admin</h2>
			<ul>
				<?php wp_register(); ?>
				<li><?php wp_loginout(); ?></li>
				<li><a href="http://www.wordpress.org/">WordPress</a></li>
				<?php wp_meta(); ?>
				<li><a href="http://validator.w3.org/check?uri=referer">XHTML</a></li>
			</ul>
		</div>
			
	</div>

	<div style="clear:both;"></div>

	<?php endif; ?>
	
</div>

<!-- end sidebar -->

PHP:

 

You've got some incorrectly nested divs going on. Basically, you'll want it to look like

<div> // starting a sidebar container
[INDENT]<div style="clear:both;">Adsense Goes Here</div>

<div style="width:49%; float:left;">Left Content Goes Here</div>
<div style="width:49%; float:right;">Right Content Goes Here</div>

<div style="clear:both;">Latest Headlines Go Here</div>

<div style="width:49%; float:left;">Left Content Goes Here</div>
<div style="width:49%; float:right;">Right Content Goes Here</div>[/INDENT]
</div> // ending a sidebar container

Code (markup):

Maybe a full width class, then left/right classes?

 

thats very different to the code i currenty have.

I was guessing it was down to div tags but unlike html which i can look throug and see problems straight away, css is a little less clear to me. Ive had a little play around and got it to look a little more like it should but its still not quite right.

Can anyone point me a little closer to the actual problem so i can correct the code i have instead of redoing the whole of the sidebar.


Cheers

 

You're going to have to reorder the tags on your entire side bar, one way or another. Your div tags are currently incorrectly nested. You have columns you want to be full width contained in half width columns. It's not a terribly easy thing to fix.

If you'd like to do it yourself, you're going to need to strip out the existing divs, and replace them with consistent classes. The style for the full width divs should be

width:100%;
clear:both;

Code (markup):

And the code for the half width divs should be something like

width:49%; // to prevent overlapping margins
float:left; // or right, depending on the side

Code (markup):