title: HTML - How can I set the width of a floating element to 100% of its parent div?
body: <p>I have the following code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
     margin:0;
    }
    #navbar{
     background-color:red;
     height:70px;
     
     width:80%;
     margin:auto;
    }
    #search{
     width:100%;
    }
    #element1{
     height: 100%;
     float:left;
     background-color:green;
     display: table;
    }
    #element2{
        height: 100%;
     float:left;
     background-color:yellow;
     display: table;
    }
    .v_center{
     display: table-cell;
     vertical-align: middle;
     border-style: solid;
     width:100%;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;HEAD&gt;
   &lt;link rel="stylesheet" href="style.css" /&gt;
  &lt;/HEAD&gt;
  &lt;BODY&gt;
   &lt;div id="navbar"&gt;
    &lt;!--&lt;img src="http://www.findwatchdeals.com/media/logo.png" width="100px" height="50px"/&gt;
    &lt;input type="search" id="search"/&gt; --&gt;
    &lt;div id="element1" &gt;
     &lt;div class="v_center"&gt;
      test
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;div  id="element2" &gt;
     &lt;div class="v_center"&gt;
      &lt;input type="search" id=#search/&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;br style="clear:both;"/&gt;
   &lt;/div&gt;
  &lt;/BODY
  &lt;/HTML&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the result:
  <a href="https://i.stack.imgur.com/ixqkU.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ixqkU.jpg" alt="enter image description here"></a></p>
  
  <p>How can I make #element2 with a width of 100%, like this:
  <a href="https://i.stack.imgur.com/2LLo3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2LLo3.jpg" alt="enter image description here"></a></p>
  
  <p>I think I need to get rid of the 'float:left', but without it, they don't align next to eachother. Can someone help me?</p>