title: TextArea not working fine without a DIV tag
body: <p>I have designed a simple modal box in HTML.</p>
  
  <p>Now in the modal I tried creating 2 sections horizontally using a hr tag.It worked fine and sections were created.</p>
  
  <p>After this I tried putting a text area in the upper section. I was able to successfully place the text area. However placing the text area there caused the seperator (hr tag line) to be moved further down.</p>
  
  <p>However when I put the text area part of the code in a div element and provided a width and height it worked fine.</p>
  
  <p>Please can anyone explain me the reason why it was not working without a div element.</p>
  
  <p>Also if could be made to work without a DIV  tag , how is that possible ?</p>
  
  <p>HTML Code :</p>
  
  <pre><code>&lt;html&gt;
      &lt;link href="showTutorial.css" rel="stylesheet"/&gt;
  
      &lt;body &gt;
      &lt;script src="showTutorial.js" type="text/......script"&gt;&lt;/script&gt;
          &lt;div id="left1"&gt;
              &lt;ol&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;What is ....&lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;What &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;Strings&lt;/li&gt;
                          &lt;/a&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;Arrays&lt;/li&gt;
                          &lt;/a&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;Threads&lt;/li&gt;
                          &lt;/a&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;What is ......&lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href="#"&gt;What is ......&lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;a href="#"&gt;Strings&lt;/li&gt;
                                  &lt;/a&gt;
                                  &lt;li&gt;
                                      &lt;a href="#"&gt;Arrays&lt;/li&gt;
                                  &lt;/a&gt;
                                  &lt;li&gt;
                                      &lt;a href="#"&gt;Threads&lt;/li&gt;
                                  &lt;/a&gt;
                              &lt;/ol&gt;
                          &lt;/div&gt;
                          &lt;div id="centre1"&gt;
                              &lt;h1 id="centre1Label1"&gt;What is .....&lt;/h1&gt;
                              &lt;button id="myBtn"&gt;Open Modal&lt;/button&gt;
  
                              &lt;!-- The Modal --&gt;
                              &lt;div id="myModal" class="modal"&gt;
  
                                  &lt;!-- Modal content --&gt;
                                  &lt;div class="modal-content"&gt;
                                      &lt;span class="close"&gt;x&lt;/span&gt;
                                      &lt;div id="upperModal"&gt;
                                      &lt;textarea id="textAreaId" rows="14"&gt;Hello&lt;/textarea&gt; 
                                      &lt;/div&gt;
                                      &lt;hr id="seperator"/&gt;
                                      &lt;div&gt;
                                      &lt;p&gt;Some text in below.&lt;/p&gt;
                                      &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
                              &lt;/div&gt;
                              &lt;div id="right1" &gt;
  
                              &lt;/div&gt;
                          &lt;/body&gt;
                      &lt;/html&gt;
  </code></pre>
  
  <p>JavaScript Code :</p>
  
  <pre><code>var modal,btn,span;
  
  window.onload=function(){// Get the modal
  modal = document.getElementById('myModal');
  
  // Get the button that opens the modal
   btn = document.getElementById('myBtn');
  
  // Get the &lt;span&gt; element that closes the modal
   span = document.getElementsByClassName("close")[0];
  
   // When the user clicks the button, open the modal 
  btn.onclick = function() {
   modal.style.display = "block";
  }
  
  span.onclick = function() {
   modal.style.display="none"; 
  }
  
   }
  </code></pre>
  
  <p>CSS code :</p>
  
  <pre><code>#left1 { 
     width:170px;    
     background:#EDD8B3; 
     float:left;
     position:relative;
     top:180px; 
     left:5px;
     border: 3px solid grey;
  
     font-size: 1.2em;   
     padding:0;
     margin:0;
  
  }
  body
  {
  background-color:#EDD8B3;
  margin:0;
  padding:0;
  
  }
  #centre1 { 
     width:620px; 
     height:800px;
     left:10px;
     background:white; 
     float:left;
     position:relative;
     top:180px;
     box-shadow: 3px 3px grey;
     margin:0;
     padding-right: 450px;
  
     }
  #right1 {   
  margin:0;
  padding:0; 
  }
  ol {
      list-style-type:none;
      background: #EDD8B3;
      padding-top:2px;
      margin-top:0.1px;
  
      }
  
  ol li {
      border-bottom: 2px solid #f0f0f0;
      display:list-item;  
      padding:5px;
      margin-left:2px;
      margin-right:0.2px;
      margin-bottom:2px;  
      margin-top:10px;
  }
  ol li a {text-decoration:none;  
        color:#008080;
  }
  
  #centre1Label1{position:relative;left:480px;padding:0; margin-right:30px;}
  
  .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 60px; /* Location of the box */
      left: 0;
      top: 0;
      width: 1300px; /* Full width */
      height: 1000px; /* Full height */
      overflow: auto; /* Enable scroll if needed */    
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content */
  .modal-content {
      background-color: #fefefe;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 1000px;
      height:450px;
  }
  
  /* The Close Button */
  .close {
      color: #aaaaaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
  }                                                                               
  
  #seperator{
  margin-top:180px;
  padding:0;
  }
  
  #textAreaId{
  padding:0;
  margin:0;
   min-width:100%;
  
   }
  
   #upperModal{
   height:50px;
   }
  </code></pre>