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