Having a horrible time with floated div height - Wordpress

Please ignore any other issues i'm having, this site is far from complete.

I can't get .sidebar match the height of .main-left

<?php
/*
Template Name: Main
*/
?>
<?php get_header(); ?>

<div class="main-wrap">
        <div class="main-left">
            <div class="slider">
                <div id="slideshow">

                    <ul class="slides">
                        <li><img src="<?php bloginfo('template_directory'); ?>/images/slider/lobster.jpg" width="720" height="280" alt="The Dock" /></li>
                        <li><img src="<?php bloginfo('template_directory'); ?>/images/slider/theDock-front.jpg" width="720" height="280" alt="The Dock" /></li>
                        <li><img src="<?php bloginfo('template_directory'); ?>/images/slider/icecream.jpg" width="720" height="280" alt="The Dock" /></li>
                        <li><img src="<?php bloginfo('template_directory'); ?>/images/slider/tables.jpg" width="720" height="280" alt="The Dock" /></li>
                        <li><img src="<?php bloginfo('template_directory'); ?>/images/slider/clams.jpg" width="720" height="280" alt="The Dock" /></li>
                    </ul>

                    <span class="arrow previous"></span>
                    <span class="arrow next"></span>
                </div>

            
            </div>
       
       
            <div class="topStories" id="shadow">

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('main-sidebar') ) : ?>
<?php endif; ?>
            
               <div class="fb-like" data-href="https://www.facebook.com/pages/The-Dock-Restaurant/347826841185" data-send="true" data-width="650" data-show-faces="true" data-action="recommend"></div>
         <div id="clear"></div>
        </div>
    </div>
        <div class="main-right">
            <div class="sidebar" id="shadow">
                <?php get_sidebar(); ?>
            
            </div>
             <div id="clear"></div>
        </div>
        <div id="clear"></div>

    </div>
    
<?php get_footer(); ?>

PHP:

.main-wrap{width:1000px; height:100%; }
.main-left{width:740px;margin:0 10 0 0;float:left;}
.main-right{width:250px;float:right;}

.slider{width:740px;height:300px;}
.topStories{width:722px; height:auto; margin:10px auto 0;padding:10px;background-color:#FFF;}
.mainstories{width:722px; margin:0 auto 0;padding:10px;background-color:#FFF;}
.sidebar{width:220px; height:100%; padding:10px; background-color:#FFF;}

Code (markup):

Let me know if there is anything else that will help you, the site is on my local sorry for not having a link

 

It would be more easy to help if you had a link..
But I'm not quite sure why did you write float:right to your .main-right.. float:left should also do the trick.. might aswell try that..
And try setting sidebar's height auto instead of 100%..
and let me know what happened..