DIV extending beyond parent DIV - html

Question

I'm trying to keep a child DIV from extending over the parent....the DIV in question is the one seen below labeled with id="2".....it goes past the parent DIV and goes all the way to the bottom of the page/browser window. I've modified the height, adding padding, changed location of the DIV and nothing works....not sure what to try next:
<div id="2" style="width:15%; height:90%; padding:10px; background-color:#2A7FAA; float:right; margin-top:200px"></div>
<div style="background-color:#FFF; border:thick; border-width:thick;">
<div style="margin-left:250px;">
<img style="padding:2em;" alt="ASH Banner" src="images/banner.png" class="banner"> <img style="padding:2em;" alt="ASH Banner" src="images/dsh-logo.png" class="logo">
</div>
</div>
<div style="height:15px; background-color:#2A7FAA"></div>
<div style="margin-left:150px; background:#CCC">
<div class="dropdown">
<button class="dropbtn" style="background-color:transparent">HOME
</button>
</div>
<div class="dropdown">
<button class="dropbtn" style="background-color:transparent">PERSONNEL
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn" style="background-color:transparent">INSURANCE
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn" style="background-color:transparent">WORKERS COMP
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn" style="background-color:transparent">EMPLOYMENT<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn" style="background-color:transparent">BENEFIT PREMIUMS<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<hr / style="border-width: 2px; width:800px; margin-right:9em;">
<div style="margin-top:3em">
<div style="width: 800px; margin: 0 auto;">
<p>Text Goes Here Text Goes Here Text Goes Here</p>
</div>
</div>
<div style="width: 800px; margin: 0 auto;">
<div class="cbox" style="left: 320px; top: 150px; width: 622px;">
<table>
<tr>
<td><img class="center" alt="" src="images/sponsor-dot.gif" width="15" /> <span onClick="openClose('a1')" style="cursor:hand; cursor:pointer; color: #33F; text-decoration:underline">Personnel Contacts</span>
<div id="a1" class="texter">
<ul class="style3">
<li class="listbox">Personnel Phone List</li>
<li class="listbox">Payroll Partners</li>
<li class="listbox">Personnel Specialist Work Assignments</li>
<li class="listbox">Work Area by Payroll Reporting Unit</li>
</ul>
</div>
</td>
</tr>
<tr>
<td><img class="center" alt="" src="images/sponsor-dot.gif" width="15" /> <span onClick="openClose('a2')" style="cursor:hand; cursor:pointer; color: #33F; text-decoration:underline">Insurance Information</span>
<div id="a2" class="texter">
<ul class="style3">
<li class="listbox"><a href='User_Area/HR/BenefitsWorksheet2017.pdf'>Benefits Worksheet </a></li>
<li class="listbox"><a href='http://eservices.calhr.ca.gov/BenefitsCalculatorExternal/'>Benefit Premium Calculator </a></li>
<li class="listbox"><a href='http://www.calhr.ca.gov/employees/pages/new-employee-benefits-orientation.aspx'>New Employee Benefits Orientation </a></li>
<li class="listbox"><a href='user_area/hr/HealthInsuranceMarketplaceCoverageOptions.pdf'>Health Insurance Marketplace Coverage Options </a></li>
<li class="listbox"><a href='user_area/hr/2018HighlightsAndChanges.pdf'>2018 Plan Highlights and Changes</a></li>
<li class="listbox"><a href='user_area/hr/DentalHandbook2017.pdf'>Dental Handbook 2017</a></li>
<li class="listbox"><a href='user_area/hr/DentalHandbook2018.pdf'>Dental Handbook 2018</a></li>
<li class="listbox"><a href='user_area/hr/CobenHandbook2017.pdf'>COBEN Handbook 2017</a></li>
<li class="listbox"><a href='user_area/hr/CobenHandbook2018.pdf'>COBEN Handbook 2018</a></li>
<li class="listbox"><a href='user_area/hr/FlexElectHandbook2017.pdf'>Flex Elect Handbook 2017</a></li>
<li class="listbox"><a href='user_area/hr/FlexElectHandbook2018.pdf'>Flex Elect Handbook 2018</a></li>
<li class="listbox"><a href='user_area/hr/Open_Enrollment_Event_Flyer.pdf'>2017-18 Open Enrollment Event 9/11/17 12pm-2pm</a></li>
<li class="listbox"><a href='user_area/hr/Open_Enrollment_Newsletter.pdf'>CalPERS 2017-18 Open Enrollment Newsletter</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td><img class="center" alt="" src="images/sponsor-dot.gif" width="15" /> <span onClick="openClose('a14')" style="cursor:hand; cursor:pointer; color: #33F; text-decoration:underline">Employment</span>
<div id="a14" class="texter">
<ul class="style3">
<li class="listbox">Training and Experience (T&E) Assessment Instructions</li>
<li class="listbox">Examination/Employment Application</li>
<li class="listbox">Exam Announcements</li>
<li class="listbox">Vacancy Listings</li>
<li class="listbox">CalHR Best Hiring Practices</li>
<li class="listbox">Authorization to Obtain Employment Reference Information</li>
<li class="listbox">Pre-Employment Reference Checklist</li>
</ul>
</div>
<p> </p>
</td>
</tr>
</table>
</div>
</div>