CSS - Css Template Positioning Problem

<div id="submenu">
     <div id="submenu_container">
     	<div id="submenu_arrow"></div>
        <ul id="nav">
            <li id="current"><span>Our Investment Philosophy</span></li>
            <li id="dash"></li>
            <li><a href="#">Our Team</a></li>

            <li id="dash"></li>
            <li><a href="#">Our Services</a></li>
          </ul>
     </div>
 </div>

submenu{
	height: 41px;
	background-image: url(images/content_bg.gif);
	background-repeat: repeat-y;
	/*border: thin solid red;*/
}
#submenu_container{
	margin-left:12px;
	margin-right:20px;
	height: 41px;
	background-image: url(images/sub_bg.gif);
	background-repeat: repeat-x;
	/*border: thin solid green;*/
}

#submenu_arrow{
	float:left;
	margin:0 4px 0 45px;
	height: 41px;
	background-image: url(images/sub_arrow.gif);
	background-repeat: no-repeat;
	width: 14px;
	/*border: thin solid blue;*/
}

#bottomBarLeft {
	position:absolute;
	bottom:0%;
	left:0%;
	right:50%;
	width:50%;
	height:auto;
	text-align:left;
	font-size:9px;
}

#bottomBarRight {
	position:absolute;
	bottom:0%;
	left:50%;
	right:0%;
	width:50%;
	height:auto;
	text-align:right;
	font-size:12px;
}

<div id="navdiv">
		<div id="navdivleft"><a href="/" id="buttonhome"><b>Homepage</b></a>
		  <a href="../news.html" id="buttonnews"><b>Company News</b></a>
		  <a href="../about.html" id="buttonabout"><b>About Us</b></a>
		  <a href="../contact.html" id="buttoncontact"><b>Contact Us</b></a></div>
		<div id="navdivright"><a href="../projects.html" id="buttonprojects"><b>Completed Projects</b></a>
		  <a href="../ec-smartglass.html" id="buttonec"><b>EC SmartGlass</b></a>
		  <a href="../lc-smartglass.html" id="buttonlc"><b>LC SmartGlass</b></a>
	      <a href="../faq.html" id="buttonfaq"><b>FAQ</b></a></div>
	</div>

/* Main Styles that apply to body */
body {
	font-size: 11px;
	font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
	margin: 0px;
	padding-left: 50%;
	background: #f4f4f4 center repeat-y;
	position: absolute;
}

/* This is the page container built and centered using -ve margins */
#container {
	width: 700px;
	margin-left: -350px;
}

/* The topmost faded bar */
#topbar {
	width:auto;
	background: #EEE;
	height: 20px;
	padding: 10px 5px 5px 2px;
	font: normal 115%/1.25em Arial, Helvetica, sans-serif;
	color: #7C484A;
	text-align: right;
	text-transform: capitalize;
}

/* This holds the two heading blocks, the title and the login form */
#headerwrapper {
	width: auto;
	border-top: medium solid #FFFFFF;
	border-right: none;
	border-bottom: 1px solid #26240F;
	border-left: none;
	background-image: ;
	background-color:#FF99CC;
	background-repeat: no-repeat;
	background-position: right bottom;
	height: 110px;
}
h1.name {
	font-family:"Edwardian Script ITC";
	color: #FF6699;
	font-size: 450%;
	line-height: normal;
	font-weight: normal;
	padding-left: 25px;
	}
h1.subname {
	font-size:300%;
	font-family: "Edwardian Script ITC";
	font-weight: normal;
	padding-bottom: 5px;
	line-height: .25em;
	padding-left: 50px;
	padding-top: 10px;
	}
/* class that styles the holder div of the forms */
.userform {
    width: auto;
    color: #DD7CB4;
    padding: 5px 0px 5px 3px;
    background: #fbfbfb;
    border:1px solid #efefef;
    border-top: none;
    text-align: justify;
    margin-bottom: 1px;
}

/* This will style the login and search */
.userform input {
    border: 1px solid #DDD;
    font-family: verdana;
    font-size: 10px;
    color: #BBB;
    font-weight: bold;
}

h1 {
    font: 75% verdana;
	color: #EEE;
	margin: 5px;
}

h6 {
    font: 10px verdana;
    font-weight: bold;
	color: #DDD;
	margin: 0px;
	padding: 0px;
	margin-left: 8px;
}

/* This holds the tabs */
#tabholder
{
    width: auto;
}

/* Container for the article box, and the pic box */
.articleboxouter {
    width: auto;
    padding: 0px 6px 0px 5px;
    clear: both;
} 

/* Content holder for the articles */
.articleboxinner {
    width: auto;
    line-height: 20px;
    color: #DD7CB4;
    padding: 15px 6px 0px 6px;
    background: #fbfbfb;
    border:1px solid #efefef;
    text-align: justify;
    height: 220px;
}

/* The title style for the main article */
.articleheader
{
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #CCC;
}

/* This will style the read more thing at the bottom */
.readmore {
    text-align: right;
    display: block;
    width: auto;
}

/* This controls the main pic in the main article box */
.mainpiccontrol
{
    border: 1px #DBB7DB solid;
    float: left;
    margin-right: 10px;
}

/* Container for the pic thumbnails */
.picboxouter {
    width: auto;
    padding: 0px 6px 0px 5px;
    clear: both;
}

/* Content holder for the pic box */
.picbox {
    width: auto;
    line-height: 22px;
    color: #DD7CB4;
    padding: 5px 6px 6px 6px;
    border:1px solid #efefef;
    border-top: none;
    text-align: center;
}

/* This controls the thumbnails in the picbox div */
.pickboxcontrol
{
    border: 1px #DDD solid;
    vertical-align: middle;

}

/* Sometimes, I don't want borders around my hyperlink images */
.noborder {
    border: none;
}

/* For taming those leeeeeeetle arrows */
img {
    vertical-align: text-bottom;
}

/* Style-up those ugly default hyperlinks */
a {
	text-decoration: none;
	padding: 0;
	margin: 0;
	color: #663366;
}

/* And their ugly hover states too */
a:hover {
	text-decoration: underline;
}

/* Why should the humble footer be left out? */
#footer {
	background-color: #CCC;
	color: #fff;
	text-align: center;
	vertical-align: middle;
	height: 20px;
	padding-top: 5px;
	clear: both;
}

/* This will contain the three columns */
#newsContainer2
{
    width:auto;
    background-color: #E0E0E0;
}

/* First column of the three columns */
.c1
{
	width: 227px;
	background-color: #F7F4F7;
    border: 1px solid #DDD;
    border-top: none;
    line-height: 22px;
    color: #DD7CB4;
	float: left;
}

/* Second column of the three columns */
.c2
{
    width: 230px;
    float: left;
    border-bottom: 1px solid #DDD;
    line-height: 22px;
    color: #DD7CB4;
}

/* Third column of the three columns */
.c3
{
	width: 228px;
	background-color: #F7F4F7;
    border: 1px solid #DDD;
    border-top: none;
    line-height: 22px;
    color: #DD7CB4;
	float: right;
}

/* This controls the titles for each column */
.noteheader
{
    width:auto;
    border-bottom: 1px solid #DDD;
    border-top: none;
    color: #DD7CB4;
    height: 24px;
    font-family: verdana;
    font-size: 11px;
    font-weight: bold;
	background: repeat-x;
}

/* And this gives the column text some breathing space */
.spacy
{
    padding: 5px;
}

/* CSS Tabs */
#tabs8 {
    float:left;
    width:100%;
    background:#F1F1F1;
    font-size:93%;
    line-height:normal;
    border-bottom:1px solid #CCC;
}

#tabs8 ul {
    margin:0;
    padding:10px 10px 0 5px;
    list-style:none;
}

#tabs8 li {
    display:inline;
    margin:0;
    padding:0;
}

#tabs8 a {
    float:left;
    background:no-repeat left top;
    margin:0;
    padding:0 0 0 4px;
    text-decoration:none;
}

#tabs8 a span {
    float:left;
    display:block;
    background: no-repeat right top;
    padding:5px 15px 4px 6px;
    color:#eee;
    font-weight: bold;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs8 a span {float:none;}
    /* End IE5-Mac hack */
    #tabs8 a:hover span {
    color:#591333;
}

#tabs8 a:hover {
    background-position:0% -42px;
}

#tabs8 a:hover span {
    background-position:100% -42px;
    color: #888;
}

#tabs8 #current a {
    background-position:0% -42px;
}
#tabs8 #current a span {
    background-position:100% -42px;
    color: #888;
}
/* End of CSS Tabs */

/* CSS Document for menu */

/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */
#menu_container {
/*margin:25px 0 100px 15px; 
position:relative; */
width:700px; 
height:25px; 
z-index:100;
}

/* Get rid of the margin, padding and bullets in the unordered lists */
#pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none;}

/* Set up the link size, color and borders */
#pmenu a, #pmenu a:visited {
display:block;width:85px; /*alters the width of blocks*/
font-size:11px; 
color:#fff; 
height:25px; 
line-height:24px; 
text-decoration:none; 
text-indent:10px; 
border:1px solid #000; 
border-width:1px 0 1px 1px;}

/* Set up the sub level borders */
#pmenu li ul li a, #pmenu li ul li a:visited {border-width:0 1px 1px 1px;}
#pmenu li a.enclose, #pmenu li a.enclose:visited {border-width:1px;}

/* Set up the list items */
#pmenu li {float:left; background:#FF99CC;}

/* For Non-IE browsers and IE7 */
#pmenu li:hover {position:relative;}
/* Make the hovered list color persist */
#pmenu li:hover > a {
	background:#FF8FC2;
	color:#FF6699;
	text-decoration: underline;
}
/* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */
#pmenu li ul {display:none;}

/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
#pmenu li:hover > ul {
display:block; 
position:absolute; 
top:-11px; 
left:58px; /*this alters the position of the sub blocks*/
padding:10px 30px 30px 30px; 
background:transparent ; 
width:100px;}

/* Position the first sub level beneath the top level liinks */
#pmenu > li:hover > ul {left:-30px; top:16px;}

/* get rid of the table */
#pmenu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */
* html #pmenu li a:hover {position:relative; background:#dfd7ca; color:#c00;}

/* For accessibility of the top level menu when tabbing */
#pmenu li a:active, #pmenu li a:focus {background:#dfd7ca; color:#c00;}

/* Set up the pointers for the sub level indication */
#pmenu li.fly {background:#FF6699 
 no-repeat right center;}
#pmenu li.drop {background:#FF6699 no-repeat right center;}


/* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */

/* change the drop down levels from display:none; to visibility:hidden; */
* html #pmenu li ul {
visibility:hidden; 
display:block; 
position:absolute; 
top:-11px; 
left:80px; 
padding:10px 30px 30px 30px; 
background:transparent url(transparent.gif);}

/* keep the third level+ hidden when you hover on first level link */
#pmenu li a:hover ul ul{
visibility:hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
#pmenu li a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the fifth level hidden when you hover on third level link */
#pmenu li a:hover ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the sixth level hidden when you hover on fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul {
visibility:hidden;
}

/* make the second level visible when hover on first level link and position it */
#pmenu li a:hover ul {
visibility:visible; left:-30px; top:14px; lef\t:-31px; to\p:15px;
}

/* make the third level visible when you hover over second level link and position it and all further levels */
#pmenu li a:hover ul a:hover ul{ 
visibility:visible; top:-11px; left:80px;
}
/* make the fourth level visible when you hover over third level link */
#pmenu li a:hover ul a:hover ul a:hover ul { 
visibility:visible;
}
/* make the fifth level visible when you hover over fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul { 
visibility:visible;
}
/* make the sixth level visible when you hover over fifth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul { 
visibility:visible;
}
/* If you can see the pattern in the above IE5.5 and IE6 style then you can add as many sub levels as you like */

</style>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">

<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Treehugger Cards</title>
    <!--[if gte IE 5]>
    <style>
    #container {
    	margin-left: -351px;
    }
    </style>
    <![endif]-->
    
<link rel="shortcut icon" href="" >
    <link href="treestyle.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="dropstyle.css" rel="stylesheet" type="text/css" media="screen">
	
    
</head>

<body>
<!-- Master Container: Centered and 700px wide -->
<div id="container">

    <!-- The topmost bar -->
    <div id="topbar">
    to arrange an appointment please call - </div>
    <!-- End of top bar -->

    <!-- This holds the main header -->
    <div id="headerwrapper">

        <!-- This is the site title -->
        <h1 class="name">Treehugger Cards </h1>
		<h1 class="subname">Handcrafted Cards & Wedding Stationery</h1>
        <div>
            <!-- This is the site slogan -->
           
            <br />
        </div>
	</div>
	<!-- End of headerwrapper -->

    <!-- This hold the navigation tabs -->
    
       <ul id="pmenu">
<li><a href="#">Home</a></li>
<li class="drop"><a href="#">Weddings<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="#" class="enclose">Classic</a></li>
	<li><a href="#">Hearts</a></li>

	<li><a href="#">Conntry<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>
			<li><a href="#" class="enclose">Compact</a></li>
			<li class="fly"><a href="#">Digital<!--[if IE 7]><!--></a><!--<![endif]-->
					<!--[if lte IE 6]><table><tr><td><![endif]-->
					<ul>

					<li><a href="#" class="enclose">Canon</a></li>
					<li class="fly"><a href="#">Nikon<!--[if IE 7]><!--></a><!--<![endif]-->
							<!--[if lte IE 6]><table><tr><td><![endif]-->
							<ul>
							<li><a href="#" class="enclose">Lenses</a></li>
							<li><a href="#">Speedlight</a></li>
							<li class="fly"><a href="#">Coolpix<!--[if IE 7]><!--></a><!--<![endif]-->

									<!--[if lte IE 6]><table><tr><td><![endif]-->
									<ul>
									<li><a href="#" class="enclose">Coolpix S10</a></li>
									<li><a href="#">Coolpix L2</a></li>
									<li><a href="#">Coolpix S500</a></li>
									<li><a href="#">Coolpix P5000</a></li>
									<li><a href="#">Coolpix 4600</a></li>

									<li><a href="#">Coolpix S6 Silver</a></li>
									</ul>
									<!--[if lte IE 6]></td></tr></table></a><![endif]-->
							</li>
							<li><a href="#">D200</a></li>
							<li><a href="#">D80</a></li>
							</ul>

							<!--[if lte IE 6]></td></tr></table></a><![endif]-->
					</li>
					<li><a href="#">Minolta</a></li>
					<li><a href="#">Pentax</a></li>
					</ul>
					<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#">SLR</a></li>

			</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
	<li><a href="#">Flash</a></li>
	<li><a href="#">Video</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
<li class="drop"><a href="#">Occasions<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="#" class="enclose">Tripods</a></li>
	<li><a href="#">Films</a></li>

	<li class="fly"><a href="#">Cameras<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>
			<li><a href="#" class="enclose">Compact</a></li>
			<li class="fly"><a href="#">Digital<!--[if IE 7]><!--></a><!--<![endif]-->
					<!--[if lte IE 6]><table><tr><td><![endif]-->
					<ul>

					<li><a href="#" class="enclose">Canon</a></li>
					<li class="fly"><a href="#">Nikon<!--[if IE 7]><!--></a><!--<![endif]-->
							<!--[if lte IE 6]><table><tr><td><![endif]-->
							<ul>
							<li><a href="#" class="enclose">Lenses</a></li>
							<li><a href="#">Speedlight</a></li>
							<li class="fly"><a href="#">Coolpix<!--[if IE 7]><!--></a><!--<![endif]-->

									<!--[if lte IE 6]><table><tr><td><![endif]-->
									<ul>
									<li><a href="#" class="enclose">Coolpix S10</a></li>
									<li><a href="#">Coolpix L2</a></li>
									<li><a href="#">Coolpix S500</a></li>
									<li><a href="#">Coolpix P5000</a></li>
									<li><a href="#">Coolpix 4600</a></li>

									<li><a href="#">Coolpix S6 Silver</a></li>
									</ul>
									<!--[if lte IE 6]></td></tr></table></a><![endif]-->
							</li>
							<li><a href="#">D200</a></li>
							<li><a href="#">D80</a></li>
							</ul>

							<!--[if lte IE 6]></td></tr></table></a><![endif]-->
					</li>
					<li><a href="#">Minolta</a></li>
					<li><a href="#">Pentax</a></li>
					</ul>
					<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#">SLR</a></li>

			</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
	<li><a href="#">Flash</a></li>
	<li><a href="#">Video</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>

<li><a href="#">Religious</a></li>
<li><a href="#">Invitations</a></li>
<li><a href="#"> Seasonal</a></li>
<li><a href="#" class="enclose">Contact us</a></li>
</ul>
</div>
<br class="clear"/>
        </div>
    <!-- End of the tabs holder -->

    <!-- This is the search box and login controls holder -->
    <!-- End of the login controls holder -->

    <!-- Here's the box for the main article -->
    <div class="articleboxouter">

        <!-- Here's where you can place ur content -->
        <div class="articleboxinner">

            <!-- The flower image. 300px by 200px -->
          <img src="images/help.jpg" alt="help" width="300" height="210" class="mainpiccontrol" />
            <!-- The title for this article -->
            
		  <span class="articleheader">Welcome to Treehugger cards</span>
          <br />
			
          <!-- The preview content -->
          
        
          <!-- Link to the full article, an arrow and a text link -->
          <span class="readmore">
              <a href="#">
               <img src="images/arrow.png" alt="read more" width="12" height="12" class="noborder" />
              </a>
              <a href="#">Read More</a>
              <br />&nbsp;
          </span>
        </div>
        <!-- End of content holder -->
    </div>
    <!-- End of main article -->

    <!-- Here's the box for some pics, remove if not a photo gallery -->
    <div class="picboxouter">
        <!-- All should be uniformly sized ;-) -->
        <div class="picbox">

            <!-- Arrow pointing backwards -->
            <a href="#">
            <img src="images/arrowrev.png" alt="backward" width="12" height="12" class="noborder" />
            </a>
            &nbsp;
            <img src="images/f1.jpg" alt="help" width="120" height="80" class="pickboxcontrol" />
            <img src="images/f2.jpg" alt="help" width="120" height="80" class="pickboxcontrol" />
            <img src="images/f3.jpg" alt="help" width="120" height="80" class="pickboxcontrol" />
            <img src="images/f6.jpg" alt="help" width="120" height="80" class="pickboxcontrol" />
            <img src="images/f7.jpg" alt="help" width="120" height="80" class="pickboxcontrol" />
            &nbsp;

            <!-- Arrow pointing ahead -->
            <a href="#">
            <img src="images/arrow.png" alt="forward" width="12" height="12" class="noborder" />
            </a>
        </div>
    </div>
    <!-- End of photogallery -->

    <!-- We love three columns, don't we? -->
    <!-- Holder for three columns -->
    <div class="articleboxouter">
        <div id="newsContainer2">

            <!-- Column 1 -->
    		<div class="c1">
              <div class="noteheader"> &nbsp;About Us </div>
              <div class="spacy"> 
</div>
  		    </div>
    		<!-- Column 2 -->
          
            <div class="c2">
              <div class="noteheader"> &nbsp;Our Customers </div>
              <div class="spacy"> 
 </div>
            </div>
            <!-- Column 3 -->
    		
    		<div class="c3">
              <div class="noteheader"> &nbsp;Eco Friendly </div>
              <div class="spacy">
                <!-- The content for this attention grabbing block -->
     <br />
    </div>
  		    </div>
        </div>
    </div>
    <!-- End of the three columns holder -->

    <!-- This little whitespace will separate the page from the footer -->
    &nbsp;

    <!-- Finally, here's the humble footer, holding your copyright -->
    <div id="footer">

 (c) Copyright 2006-2007 
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            XHTML 1.0 Strict | Pure CSS Layout

    </div>
    <!-- End of footer -->

</div>
<!-- End of master container -->

</body>
</html>

<table width="200" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="background-image: url('help_tl.gif'); background-repeat: no-repeat; background-position: bottom;" width="10" height="10"></td>
<td style="background-image: url('help_top.gif'); background-repeat: repeat-x; background-position: bottom;" width="180" height="25" colspan="3"><img src="./help_pointer_tl.gif" height="25" width="15" alt="..."/></td>
<td style="background-image: url('help_tr.gif'); background-repeat: no-repeat; background-position: bottom;" width="10" height="10"></td>
</tr>
<tr>
<td style="background-image: url('help_left.gif'); background-repeat: repeat-y;" width="10"></td>
<td style="vertical-align: top; background-color: #FFFFE1;" width="20"><img src="./help_icon.gif" height="20" width="20" alt="..."/></td>
<td style="background-color: #FFFFE1; font-weight: bold; font-family: arial; font-size: 12px; vertical-align: middle;">&nbsp;Login Help</td>
<td style="vertical-align: top; background-color: transparent; text-align: center;" width="20"><img name="close" id="close" src="./close_norm.gif" height="18" width="18" alt="Close this Window"/></td>
<td style="background-image: url('help_right.gif'); background-repeat: repeat-y;" width="10"></td>
</tr>
<tr>
<td valign="bottom" style="background-image: url('help_bl.gif'); background-repeat: no-repeat;" width="10" height="10"></td>
<td valign="bottom" style="background-image: url('help_bottom.gif'); background-repeat: repeat-x; background-position: bottom;" height="10" colspan="3" width="180"></td>
<td valign="bottom" style="background-image: url('help_br.gif'); background-repeat: no-repeat;" width="10" height="10"></td>
</tr>
</table>

<div id="main_table" style="border: 1px solid rgb(124, 124, 124); float: left; background-color: rgb(181, 162, 111); width: 645px; height: 770px; text-align: center;">
	
		<div name="ifrVerse" id="ifrVerse" style="border: 1px solid rgb(181, 162, 111); margin: 5px 0px 5px 5px; float: left; width: 200px; height: 500px; background-color: rgb(210, 197, 160); z-index: 3;">
			
	<div style="border: 1px solid black; text-align: center; height: 90px; background-color: rgb(210, 197, 160);">
		<select id="selbook" size="5" onchange="fillChapters();" style="border: medium none ; margin: 5px 5px 0px; float: left; background-color: white; width: 190px;">
			<option value="" style="background-color: rgb(181, 162, 111); color: white; font-weight: bold; font-style: italic;">Select Book</option>
			<option value="1">Genesis</option>

<option value="2">Exodus</option>
<option value="3">Leviticus</option>
<option value="4">Numbers</option>
<option value="5">Deuteronomy</option>
		</select>
	</div>	<div id="showchapterdiv" style="border: 1px solid black; text-align: center; height: 90px; background-color: rgb(210, 197, 160);">
	</div>
	<div id="showversediv" style="border: 1px solid black; text-align: center; height: 90px; background-color: rgb(210, 197, 160);">
	</div>
	<div id="keywordsdiv">

	</div>	
	<div id="seltext" style="border: 1px solid black; text-align: center; background-color: rgb(210, 197, 160); height: 440px;"></div>
</div>		</div>
		
		<div name="ifrVerse2" id="ifrVerse2" style="border: 1px solid rgb(181, 162, 111); margin: 5px 5px 5px 0px; float: right; width: 200px; height: 500px; background-color: rgb(210, 197, 160); z-index: 3;">
			<form name="myForm" id="myForm" action="" method="get">
	<div style="border: 1px none rgb(0, 0, 0); text-align: center; height: 90px; background-color: rgb(210, 197, 160);">
		<select id="book2" size="5" onchange="fillChapters2();" style="border: medium none ; margin: 5px 5px 0px; float: left; background-color: white; width: 190px;">
					<option value="" style="background-color: rgb(181, 162, 111); color: white; font-weight: bold; font-style: italic;">Select Book</option>
			<option value="1">Genesis</option>

<option value="2">Exodus</option>
<option value="3">Leviticus</option>
<option value="4">Numbers</option>
<option value="5">Deuteronomy</option>

		</select>
	</div>	<div id="showchapterdiv2" style="border: 1px none rgb(0, 0, 0); text-align: center; height: 90px; background-color: rgb(210, 197, 160);">
	</div>
	<div id="showversediv2" style="border: 1px none rgb(0, 0, 0); text-align: center; height: 90px; background-color: rgb(210, 197, 160);">
	</div>
	<div id="keywordsdiv">

	</div>	
	<div id="text" style="padding: 10px; width: 50px; height: 440px;"></div>
</form>					
		</div>