3 bottom regions

We can make 3 bottom regions as follows
Bottom region 1->$content_bottom_top
Bottom region 2->$content_bottom
Bottom region 3->$content_bottom_bottom

1. Adding php code as follows above the code for $content_bottom in page.tpl.php

	<div id="content-bottom-top">
				 <?php if ($content_bottom_top): print '<div class="region-content clear-block">'.$content_bottom_top.'</div>'; endif; ?>
			</div>

2. Adding php code as follows below code for $content_bottom in page.tpl.php

         <div id="content-bottom-top">
                                  <?php if ($content_bottom_bottom): print '<div class="region-content clear-block">'.$content_bottom_bottom.'</div>'; endif; ?>
        
			</div>

3. Adding the following region code in .info file

regions[content_bottom_top] = Bottom top content
regions[content_bottom_bottom] = Bottom bottom content

4. Adding the following css for the new regions created in your custom .css file

/* CSS for content-bottom-top and content-bottom-bottom regions */

.block-admin #featured, .block-admin #content-bottom-top, 
.block-admin #featured, .block-admin #content-bottom-bottom, {
  padding: 1.5em 0;
}

.block-admin #content-bottom-top .block-region, 
.block-admin #content-bottom-bottom .block-region {
  clear: both;
}

#content-bottom-top,
#content-bottom-bottom {
  background: #ddd7cd url(images/bottom_bkg.png) 0 0 repeat-x;
}


#content-bottom-top .block,
#content-bottom-bottom .block {
  float: left;
  width: 44%;
  margin-bottom: 1.5em;
}

#content-bottom-top .block-odd,
#content-bottom-bottom .block-odd {
  clear: left;
  margin-right: 5%;
}

#content-bottom-top .block-title,
#content-bottom-bottom .block-title {
  background:url(images/bottom_block_header_bkg.png) 0 0 repeat-x;
}

#content-bottom-top .block h2.title,
#content-bottom-bottom .block h2.title {
  background: url(images/bottom_block_header_right.png) 100% 0 no-repeat;
  height: 32px;
  font-size: 1.5em;
  letter-spacing: .1em;
  color: #505050;
  margin: 0;
  padding: 8px .75em 0; 
  border: 0;
}

#content-bottom-top .block-title .blockinner,
#content-bottom-bottom .block-title .blockinner {
  background: url(images/bottom_block_header_left.png) 0 0 no-repeat;
}

#content-bottom-top .block .content,
#content-bottom-bottom .block .content {
  background: transparent;
  padding: .5em 1.25em;
}

#content-bottom-top,
#content-bottom-bottom {
  min-width: 765px;
  max-width: 1165px;
  margin: 0 auto;
}

#content-bottom-top,
#content-bottom-bottom {
  padding: 0 48px;
}

#content-bottom-top,
#content-bottom-bottom {
  min-height: 21px;
}

#content-bottom-top .region-content,
#content-bottom-bottom .region-content {
  padding: 2em;
}

Nice work, shruti.sheth. I read the request, however, as wanting these three regions side-by-side, instead of stacking them. That's a common design for the content the OP anticipates putting there.

If you want the three regions side-by-side you can still use the solution proposed by shruti.sheth, it's just a matter of adjusting the CSS. Setting a width on the regions and making them float left should get them side by side.