My theme's breaking, div issue?

Hi Iv'e added 3 widget area's in index.php, though when I added the code for the widgets my theme breaks by the side bar.

http://i27.tinypic.com/othz43.jpg

Here's my code:

<br />
<?php get_header() ?></p>
<p>	<div id="content"><br />
		<div class="padder"></p>
<p>        <div class="padderHome"></p>
<p>		<?php do_action( 'bp_before_blog_home' ) ?></p>
<p>		<div class="page" id="blog-latest"></p>
<p>	<div></p>
<p>			<div id="third-section"><br />
			<?php if ( !function_exists('dynamic_sidebar')<br />
			        || !dynamic_sidebar('Column 3') ) : ?></p>
<p>			<div class="widget-error"><br />
				<?php _e( 'Please log in and add widgets to this section.', 'buddypress' ) ?> <a>/wp-admin/widgets.php?s=&show=&sidebar=first-section"><?php _e( 'Add Widgets', 'buddypress' ) ?></a><br />
			</div></p>
<p>			<?php endif; ?><br />
            </div></p>
<p>            <div id="second-section"><br />
            <?php if ( !function_exists('dynamic_sidebar')<br />
			        || !dynamic_sidebar('Column 2') ) : ?></p>
<p>			<div class="widget-error"><br />
				<?php _e( 'Please log in and add widgets to this section.', 'buddypress' ) ?> <a>/wp-admin/widgets.php?s=&show=&sidebar=second-section"><?php _e( 'Add Widgets', 'buddypress' ) ?></a><br />
			</div></p>
<p>			<?php endif; ?><br />
            </div></p>
<p>            <div id="first-section"><br />
			<?php if ( !function_exists('dynamic_sidebar')<br />
			        || !dynamic_sidebar('Column 1') ) : ?></p>
<p>			<div class="widget-error"><br />
				<?php _e( 'Please log in and add widgets to this section.', 'buddypress' ) ?> <a>/wp-admin/widgets.php?s=&show=&sidebar=third-section"><?php _e( 'Add Widgets', 'buddypress' ) ?></a><br />
			</div></p>
<p>			<?php endif; ?><br />
            </div></p>
<p>	</div><br />
</div></p>
<p>		<?php do_action( 'bp_after_blog_home' ) ?><br />
</div><br />
		</div><!-- .padder --><br />
	</div><!-- #content --></p>
<p>	<?php locate_template( array( 'sidebar.php' ), true ) ?></p>
<p><?php get_footer() ?><br />

and the css:

<br />
#first-section {<br />
	float: left;<br />
	width: 260px;<br />
}</p>
<p>#second-section {<br />
	float: left;<br />
	width: 260px;<br />
	margin-right: 80px;<br />
}</p>
<p>#third-section {<br />
	float: left;<br />
	width: 260px;<br />
	margin-right: 80px;<br />
}</p>
<p>.widget {<br />
	margin-bottom: 20px;<br />
}</p>
<p>h3.widgettitle {<br />
	background: #8CC63F;<br />
			-moz-border-radius-topleft: 10px;<br />
			-webkit-border-top-left-radius: 10px;<br />
			-moz-border-radius-topright: 10px;<br />
			-webkit-border-top-right-radius: 10px;<br />
	font-size: 12px;<br />
	padding: 5px 15px;<br />
	color: #ffffff;<br />
}</p>
<p>.padderHome {<br />
	padding: 20px;<br />
}</p>
<p>#col-wrap {<br />
	position: relative;<br />
	clear: both;<br />
	float: left;<br />
	width: 100%;<br />
	overflow: hidden;<br />
}<br />

ps:dont worry about the widget title, Ive excluded it for a reason