How to put two widgets side by side in blogger head

I'm trying to put two flash widgets side by side in my blog's head area. Here is how I did it:

Just Go To Layout > Edit Html

And Search For </b:skin>

Now add these below Css codes before it-

/*-- Two part Header --*/
#contentbar {
position: relative;
clear: both;
display: block;
$startSide top;
width: 760px;
}

#headbar1 {
display:block;
float:left;
margin-left:0px;
width:220px;
}
#headbar2 {
display:block;
float:right;
margin-left:0px;
width:540px;
}

Please edit the width of the above codes in red to adjust to the width of the navigation menu to adjust it to yours template width.You can change the color and design of above css also if you are capable of it.
Now Search for below codes-


<div id="'header-wrapper'">


And add the below codes after the above codes:-

<div id='contentbar'>
<div id='headbar1'>
<b:section class='header' id='HTML81' maxwidgets='2' preferred='yes' showaddelement='yes'>
<b:widget id='HTML101' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div id='headbar2'>
<b:section class='header' id='HTML82' maxwidgets='2' preferred='yes' showaddelement='yes'>
<b:widget id='HTML102' locked='false' title='' type='HTML'/>
</b:section>
</div>
</div>

Now go to Layout > Page Elements
walla, two editable HTML/Javascript Tabs show up side by side in the head area.


[ Supporting files]
[ Socialize This]