Hidden widget area

Hi, I searched the forum but it seems nobody else is experiencing my same issue that’s why I’m posting this, not sure if this is the right forum so sorry if it isn’t.

Now I’m going to describe the problem, I’m developing a wordpress website on localhost I’m using the latest version of xampp at the time of writing, everything works mod rewrite and all so I begun to edit the layout of the website, I’m using a twentyten child theme, the first thing I wanted to do is to create a custom widget area below the nav menu on order to display some ads the functions.php of my child theme looks like this:

<?php
add_action( 'init', 'header_widgets_init' );
function header_widgets_init() {
// Top ad area
	register_sidebar( array(
		'name' => __( 'Top ad area', 'twentytenchild' ),
		'id' => 'top-ad-area',
		'description' => __( 'The top ad area', 'twentytenchild' ),
		'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );
}
?>

and this is the bottom part of the header.php of the child theme:

<div id="main">
<?php
	// Top ad area.
	if ( is_active_sidebar( 'top-ad-area' ) ) : ?>

		<div id="topad" >
				<?php dynamic_sidebar( 'top-ad-area' ); ?>
		</div><!-- #topad  -->

<?php endif; ?>

the child theme is active and of course I made a style.css file for it,
the widget area that I made appears on the widget configuration page and I can drag and drop the widgets into it the problem is that the widgets are not displayed by the browser but if I repeatedly click on the refresh button it sometimes appears for a millisecond and then gets hidden I checked the source and both the widget area and the widgets in it are there, so I thought this could be a css problem therefore I uncommented the line @import url("../twentyten/style.css"); in the child theme’s style.css and nothing I added this to it `#topad {
padding: 50px;
height: 100px;
margin: 20px;
float: left;
display:block;
visibility:visible;
clear:both;
}`

I checked the result everytime I added something and the result doesn’t change I installed another wordpress theme and I modified its files without using a child theme and the result is the same the code is there but the widget is not displayed I tested it using both firefox and chrome exactly the same output. I’m desperate I don’t know what else to do please somebody help me.