How to split header to 2

Sometimes you want to design your template blog.Now I want  to make the blog Header into 2 column as the picture .
Follow the below steps:
1- Find the code  ]]></b:skin>
2- Copy the code below to paste exactly above ]]></b:skin>.

Please Select on Highlight All and then Click on Copy to Clipboard

<br /> <br /> #header-wrapper { <br /> width:900px; <br /> margin:0 auto 0px; <br /> background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center; <br /> height:190px; <br /> } <br /> <br /> #head-inner { <br /> width:600px; <br /> background-position: left; <br /> margin-left: auto; <br /> margin-right: auto; <br /> float:left; <br /> } <br /> <br /> #header { <br /> margin: 0px; <br /> text-align: left; <br /> color:#ffcc66; <br /> } <br /> <br /> #r_head{ <br /> width:300px; <br /> float:left; <br /> padding-top:10px; <br /> }

Note: If your template has the same code , you have to take only some part of above code and edit by yourself. You have to edit your  width pixel of #header- wrapper to suit your template.
3- Find the code below :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>

4- Copy the code below to replace the above code or you can make any part to make your code as copied code.

Please Select on Highlight All and then Click on Copy to Clipboard

<br /> <div id='header-wrapper'><div id='head-inner'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <br /> <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/> <br /> </b:section> <br /> </div><div id='r_head'><b:section class='header' id='header2' preferred='yes'/> <br /> </div></div>

5- Save your template.