Bottom Div Overlaps Previous Divs

Hi Experts,

I have an outer div that contains several of inner divs. Vertically, the outer div is devided into top and bottom, and within the top section (not an actual div) I have several of inline divs and other elements that are coming out correctly.

On my bottom div, I just trying to set it to the bottom of the outer div, but it overlaps all previous divs. The top section with the inline divs and other elements is far more complex, but I am having an issue with the bottom, where I just want my textarea to be under the label Comments, Very simple.

I am attaching a snapshot, where you will see the blueviolet border overlapping everything, where it should only contain the Comment label and tetxarea

 <!DOCTYPE html>
<html lang="en">

 <head>
	<meta charset="utf-8">
        <title>RS @ APD</title>
	<style>
/*CSS for Add/Edit Vehicle List and Details*/

#divList{
    width: 620px;
    margin: 20px auto;
}
label{
    width: 13em;
    text-align: right;
}
#btnActive{
    width: 7em;
    margin-left: 15px;
    margin-right: 15px;
}
#btnArchived{
    width: 7em;
}
#btnAdd{
    width: 12em; 
    margin-left: 10px;
}
#btnMenu{
    width: 12em;
    margin-left: 10px;
    margin-right: 10px;
}
#btnDispatch{
    width: 12em;
}

#divDetails{
    width: 1150px;
    border: 2px solid blue;
    margin: 10px auto;
}

#divLeft{
    width: 380px;
    height: 110px;
    float: left;
    display: inline;
    border: 2px solid red;
}
#lblName{
    margin-top: 20px;
    margin-left: 30px;
    margin-right: 0px;
    text-align: left;
    width:7em; 
}

#txtName{
    width: 15em;
}
#lblArchived{
    width: 4em;
    margin-left: 180px;
}
#chkArchived{
    width: 1em;
}

#assoc-container{
    float: left;
    border: 2px solid green;
    margin-top:20px;
    margin-bottom: 20px;
    margin-left: 50px;
    width: 660px;
    height: 140px;
}

.assoc_listboxes{
   float: left;
   padding: 2px;
   display: inline;
   width: 270px;

}  

#assoc_btn_container{
   float: left;
   display: inline;
   width: 100px; 
   margin-top: 3px;
   margin-left: 10px;
   margin-right: 10px;
} 
.assoc_buttons{
   width: 100px;
   margin-bottom: 8px;
   border: 2px solid black;
   border-radius: 4px;
   background-color:RGBA(153,212,254,0.30);
   padding:2px;
}

.assoc_buttons:hover{
    background-color: yellow;
}

.hidden{
    float: right;
    display: block;    
    margin-bottom: 20px;
    display: none;
}
#divBottom{
    border: 2px solid blueviolet;
}
#lblComment{
    width: 7em;
    border: 2px solid red;
    /*margin-left: 245px;*/
}
#txtComments{
    clear: both;
    width: 800px;
}

	
	
	</style>
            
</head>

    <body>

        <h1>RS @ APD</h1><br>
        <h2>Current Location Group Details</h2>
        
        <!--Content Start-->

    <!--content-->
    <form name="frmLocGroup" id="frmLocGroup" autocomplete="off" method="post" 
          action="index.php?action=save" onSubmit="return checkRequired();">

        <div id="divDetails">
     
         
            <div id="divLeft">
                <input type="hidden" name="hidGroupID"  id="hidGroupID" value="15">
            
                <label for="txtName" class="required" id="lblName">Group Name:</label><br>
                <input type="text" name="txtName" id="txtName" class="required" value="Aleks Test Group" maxlength="100">
                   <br><br>
                <label for="chkArchived" id="lblArchived">Archived</label>   
                <input type="checkbox" name="chkArchived" id="chkArchived" checked=checked>   
            </div>  

            <div id="assoc-container">

                <select name="lstGroupLocs" id="lstGroupLocs" class="assoc_listboxes" size="8">
                                    </select>

                <div id="assoc_btn_container">
                    <input type="button" class="assoc_buttons" name="btn_add" value="< Add" onclick="moveItem('lstAllGroups', 'lstGroupLocs');"><br>
                    <input type="button" class="assoc_buttons" name="btn_add_all" value="<< Add All" onclick="moveAll('lstAllGroups', 'lstGroupLocs');"><br>
                    <input type="button" class="assoc_buttons" name="btn_del" value="Delete >" onclick="moveItem('lstGroupLocs', 'lstAllGroups');"><br>
                    <input type="button" class="assoc_buttons" name="btn_del_all" value="Delete All >>" onclick="moveAll('lstGroupLocs', 'lstAllGroups');">
                </div>

                <select name="lstAllGroups" id="lstAllGroups" class="assoc_listboxes" size="8">
                                        
                   
                                        
                        <option value="218">Windsor Arms </option>
                    
                                        
                        <option value="346">Woodbine Hotels and Suites </option>
                    
                                        
                        <option value="48">Yonge and Bloor </option>
                    
                                        
                        <option value="234">Yonge and Carlton </option>
                    
                                        
                        <option value="262">Yonge and Isabella </option>
                    
                                        
                        <option value="264">Yonge and Wellesley </option>
                    
                                        
                        <option value="267">Yorkville and Avenue </option>
                    
                                        
                        <option value="68">Zanzibar </option>
                    
                                        
                        <option value="173">Zoom Tours </option>
                    
                                    </select>
            
        </div>            

        <div class="hidden">                                             
            txtIDsFor:  <input type="text" id="txtIDsFor" name="txtIDsFor" value="lstGroupLocs"><br>
            txtSubmitIDs: <input type="text" id="txtSubmitIDs" name="txtSubmitIDs" value=""><br>
            chkUpdated: <input type="checkbox" id="chkUpdated" name="chkUpdated">
        </div>
                   
            <div id="divBottom">
            
                <label for="txtComments" id="lblComment" >Comments:</label><br>
        
                <textarea name="txtComments" id="txtComments" 
                          maxlength="4000">Line1

Line 3</textarea>          
            </div>
            <br>
                <input type="submit" name="btnSubmit" id="btnSaveandClose_addedit_locGroup-details" value="Save & Close" class="buttons">
                <input type="button" name="btnCancel" id="btnCancelandClose_addedit_locGroup-details" value="Cancel & Close" onClick="cancelChanges();" class="buttons">   
            <br><br>
        </div>
     </form>
             
    <!--Place where appropriate-->
    
 

<script type="text/javascript" src="../../utilities/assoc_transfers.js"></script>

<script type="text/javascript">
    
    function cancelChanges(){
        if (confirm("Are you sure you want to cancel these changes?")) {
            self.location = "index.php?action=cancel";
        }
    }
    
    function checkRequired() {
        
        var name = frmLocGroup.txtName.value;
        
        if (name === '') {
            alert ('Group Name is mandatory.');
            return false;
        }
                        
        return true;
    }
</script>
        <!--Content Finish-->

    </body>
 
 </html>

Open in new window


Thank you
Picture1.png
APD TorontoSoftware DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
Just add clear:both to #divBottom to clear the floats.

#divBottom {
    border: 2px solid blueviolet;
    clear: both;
}

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Try using the bootstrap library.   It will take care of all of this for you plus make it easy to keep your stuff responsive.  

Check out the quick sample blocks I made.  The link to view it is http://jsbin.com/jasisu/1/ and notice if you make your browser narrow and wide what happens. There are actually 4 breakpoints and I have only used 1. You don't have to use the jquery for this as it I am  using just the css. You can check out http://getbootstrap.com/  It has a css reset and clear's.  It will make your life much easier. There is also http://foundation.zurb.com/ which has much better documentation but I have preferred working with bootsrap.
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
  #form_container{
    border: 2px solid blue;
    width:100%
   
  }
    #topleft{
    border: 2px solid red;
      height:75px;
  }
      #topright{
    border: 2px solid green;
        height:100px;
  }
        #mid{
    border: 2px solid purple;
          height:125px;
  }
           #bottom{
    border: 2px solid orange;
             height:90px;
  }
  </style>
</head>
<body>
      <h1>RS @ APD</h1><br>
        <h2>Current Location Group Details</h2>
  <div id="form_container">      
        <!--Top Row-->
<div class="row">
    
  <div id="topleft" class="col-sm-6">
     <!--top left -->
      Top left
  </div> 
  <div id="topright" class="col-sm-6">  
    <!--top right -->
    Top Right
  </div> 
</div>
<!--Mid Row-->
  <div id="mid" class="row">
    <div class="col-sm-12">Middle row</div>
  </div>  
  <!--Bottom Row-->
  <div id="bottom" class="row">
    <div class="col-sm-12">Bottom row</div>
  </div>
    
  </div><!-- end container -->
</body>
</html>

Open in new window

In simple terms, you create a row with 1 or multiple columns.  The top part is a row with 2 columns.  Noted by using the class col-sm-6.  The grid is 12 columns so you could use col-sm-5 for the left and col-sm-7 for the right.  This would of course make the right side wider.  The key is to make both columns add up to 12 or 3 or 4 columns.   The "sm" stands for small. There is xs, sm, md and lg.  You will see the sample will fold to single rows when you make the screen narrow.  This helps keep things visible without shrinking for the phone.  You can turn off that feature by using xs for everything.   col-xs-6
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.