How to layout the theme within the regions? I'm very much beginner to the drupal and learning to themeing, and I'm confused how to make regions within the regions?

+----------------------------------------------------------+
| +--------------+                +---------------------+  |
| |              |                |                     |  |
| |    header1   |                |   header2           |  |
| |              |                |                     |  |
| +--------------+                +---------------------+  |
|                       header                             |
+----------------------------------------------------------+


page--front.tpl.php

&lt;header&gt;
   &lt;div id="header1"&gt;
    .....
   &lt;?php print render($page['header1']); ?&gt;
   &lt;/div&gt;

   &lt;div id="header2"&gt;
    .....
   &lt;?php print render($page['header2']); ?&gt;
   &lt;/div&gt;

&lt;?php print render($page['header']); ?&gt;
&lt;/header&gt;


And I did the change in .info file like:

regions[header1]        = Logo Area
regions[header2]        = Search bar and Navigation


But it's not displaying as the picture describes better it:





Update:

The rendered html is like this:

&lt;header role="banner" id="header" class="header"&gt;
    &lt;div id="header1"&gt;

    &lt;/div&gt;
    &lt;div id="header2"&gt;


    &lt;/div&gt;

&lt;div class="region region-header"&gt;

&lt;/div&gt;
&lt;/header&gt;


But What I wanted to be like this:

&lt;header role="banner" id="header" class="header"&gt;


&lt;div class="region region-header"&gt;
    &lt;div id="header1"&gt;

    &lt;/div&gt;
    &lt;div id="header2"&gt;


    &lt;/div&gt;
&lt;/div&gt;
&lt;/header&gt;
You cannot make region within region. You can place block in a region.
Fix the width of block and float that. You have to use only css to achieve that.

Print wrapper like this

&lt;header&gt;
&lt;?php if($page['header1'] || $page['header2']) :?&gt;
    &lt;div class="region region-header"&gt;
    &lt;?php if($page['header1'] ) :?&gt;
        &lt;div id="header1"&gt;    
        &lt;?php print render($page['header1']); ?&gt;
        &lt;/div&gt;
    &lt;?php endif;?&gt;
    &lt;?php if($page['header2'] ) :?&gt;
        &lt;div id="header2"&gt;    
        &lt;?php print render($page['header2']); ?&gt;
        &lt;/div&gt;  
    &lt;?php endif;?&gt;
    &lt;/div&gt;
&lt;?php endif;?&gt;
&lt;/header&gt;