Responsive Problem, Slideshow in Header moving down

I looked through a couple pages on support for this plugin and tried a few things but nothing has worked, so I’m asking now after over a day of trying to fix this.

http://attachmentnetwork.ca/

I want the slideshow to show up beside my logo and maintain responsiveness, however the only way to get it to stay there is to set the width of the containing div to a pixel value. The issue with setting it to a pixel value is then it isn’t responsive anymore, and when you make the page smaller it moves the slideshow down under the footer but still within the header div.

Relevant HTML/PHP (header.php file of the child template):

<?php responsive_header(); // before header hook ?>
    <div id="header">

        <?php if (has_nav_menu('top-menu', 'responsive')) { ?>
	        <?php wp_nav_menu(array(
				    'container'       => '',
					'fallback_cb'	  =>  false,
					'menu_class'      => 'top-menu',
					'theme_location'  => 'top-menu')
					);
				?>
        <?php } ?>

    <?php responsive_in_header(); // header hook ?>

	<?php if ( get_header_image() != '' ) : ?>

        <div id="logo">
            <a href="<?php echo home_url('/'); ?>"><img src="<?php header_image(); ?>" width="<?php if(function_exists('get_custom_header')) { echo get_custom_header() -> width;} else { echo HEADER_IMAGE_WIDTH;} ?>" height="<?php if(function_exists('get_custom_header')) { echo get_custom_header() -> height;} else { echo HEADER_IMAGE_HEIGHT;} ?>" alt="<?php bloginfo('name'); ?>" /></a>
        </div><!-- end of #logo -->

    <?php endif; // header image was removed ?>

    <div id="rect-1"><?php do_action('slideshow_deploy', '304'); ?></div>

    <?php if ( !get_header_image() ) : ?>

        <div id="logo">
            <span class="site-name"><a href="<?php echo home_url('/'); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home"><?php bloginfo('name'); ?></a></span>
            <span class="site-description"><?php bloginfo('description'); ?></span>
        </div><!-- end of #logo -->  

    <?php endif; // header image was removed (again) ?>

    <?php get_sidebar('top'); ?>

				<?php wp_nav_menu(array(
				    'container'       => '',
					'theme_location'  => 'header-menu')
					);
				?>

            <?php if (has_nav_menu('sub-header-menu', 'responsive')) { ?>
	            <?php wp_nav_menu(array(
				    'container'       => '',
					'menu_class'      => 'sub-header-menu',
					'theme_location'  => 'sub-header-menu')
					); 

				?>

            <?php } ?>

    </div><!-- end of #header -->
    <?php responsive_header_end(); // after header hook ?>

Relevant CSS (styles.css file of the child template):

#logo

{
	text-align: left;
}

#header

{
	height: 245px;
}

#rect-1

{
	float: left;
	width: 100%;
	height: 200px;
}

Any and all help would be greatly appreciated, if I can provide any more information that you need just let me know and I’ll do my best.

http://wordpress.org/extend/plugins/slideshow-jquery-image-gallery/