positioning problem

Firefox is not positioning divs ifrVerse and ifrVerse2 side-by-side. I see ifrVerse2 outside the div main_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>

Code (markup):

 

You seem to have an extra div tag after:

	<div id="seltext" style="border: 1px solid black; text-align: center; background-color: rgb(210, 197, 160); height: 440px;"></div>

HTML:

Removing that extra div fixed the problem for me.

I would recommend you run your code through the W3C Validator in future to catch errors like this.

 

And to add on to what he said. You should seperate presentation (CSS) from your content (html). I wouldn't put inline styles in your HTML code and instead move all that into a css file.

~eric