My sidebar Floating at bottom - html

Question

In my custom template file, which i made for youtube videos-creating problem with my sidebar, it is showing the sidebar at bottom, below is the code i am using..
Can anyone help me, it should stick at right, as it..
<?php
/**
Template Name: gallery
*/
get_header();
?>
<style>
/* some basic styling */
h1 {font-size:20px; line-height:95%;}
#galvidcontainer {
width:1100px;
margin-left:50px;
height:1250px;
}
.galvidpre {
width:300px;
height:300px;
float:left;
margin:5px;
background-color:#00A0DA;
}
.galvidprevid {
width:300px;
}
.galvidpretext {
width:280px;
padding-top:2px;
margin-top:2px;
}
</style>
<div id="galvidcontainer">
<h1>Videos</h1>
<?php /* Loop the stuff from the videos post type */
$args = array( 'post_type' => 'videos', 'posts_per_page' => 10 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();?>
<div class="galvidpre">
<div class="galvidprevid">
<?php
/* Set variables and create if stament */
$videosite = get_post_meta($post->ID, 'Video Site', single);
$videoid = get_post_meta($post->ID, "Video ID", single);
if ($videosite == vimeo) {
echo '<iframe src="http://player.vimeo.com/video/'.$videoid.'" width="300" height="190" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
} else if ($videosite == youtube) {
echo '<iframe width="300" height="190" src="http://www.youtube.com/embed/'.$videoid.'" frameborder="0" allowfullscreen></iframe>';
} else {
echo 'Please Select Video Site Via the CMS';
}
?>
</div>
<div class="galvidpretext">
<h1><?php the_title() ?></h1>
<p>
<?php /* this is just a limit on characters displayed */
$words = explode(" ",strip_tags(get_the_content()));
$content = implode(" ",array_splice($words,0,20));
echo $content; ?>
</p>
</div>
</div>
<?php endwhile;?>
</div>
<?php get_sidebar() ?>
<?php get_footer() ?>
The thing happening with the sidebar>>http://i.imgur.com/wm82twJ.png

Answer 1

Looks like you have to clear the floats. Use clearfix or clear:both
<div id="container" class="clearfix"></div>
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}