Change size of Widget Width in wordpress - css

Question

I want to have two widgets on my home page next to each other. However I want the first widget to be 650 px, while the other to be 290px. This I am not being able to do.Can someone please help me?
The code I registered for my widgets in my theme functions.php file:
register_sidebar(array(
'name' => 'Slider 1',
'before_widget' => '<div id="%1$s" class="widget-area1 %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
register_sidebar(array(
'name' => 'Side Column',
'before_widget' => '<div id="%1$s" class="widget-area2 %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
Then I placed in my home page template file:
<?php
/**
* Template Name: Home Page
*/
get_header();
include('_functions/get-options.php');
?>
<?php /* Widgetised Area */ if(!function_exists('dynamic_sidebar') ||!dynamic_sidebar('Homepage')); ?>
**<div class="widget-area1">
<?php /* Widgetised Area */ if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('Slider 1')); ?>
</div>
<?php /* Widgetised Area */ if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('Side Column')); ?>**
<?php /* Widgetised Area */ if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('Homepage 1')); ?>
<?php /* Widgetised Area */ if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('Homepage 2')); ?>
<div class="clear"></div>
<?php get_footer(); ?>
And the css styling I placed in the stylesheet:
div.widget-area1 {
clear: both;
margin: 0 auto;
width: 650px;
}
div.widget-area3 {
clear: both;
margin: 0 auto;
width: 290px;
}
Can you please tell me what I am doing wrong?The theme that I am using is Compare if that might help.

Answer 1

The styles in your question like like they should work, but this is what I see in your stylesheet
#widget-area1 {
clear: both;
margin: 0 auto;
width: 650px;
}
#widget-area2 {
clear: both;
margin: 0 auto;
width: 290px;
}
These rules are in reference to an ID not to a class like you have defined in your question.
Also, you may want to remove the clear:both if you want them to sit side-by-side.