ios85 ios85 - 4 months ago 8
HTML Question

Dynamic Sized Textbox between two static DIV's

I am trying to create a textbox that spans the entire width of my middle column. Whenever I set the width of the textbox to 100% though it drops below the divs and doesnt look good. How do I keep the textbox contained in the middle DIV and have it be 100% of the middle DIV?

HTML

<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">
<div>
<input type="text" style=""/>
</div>
</div>


CSS

.leftsidebar { width: 60px; background:red; float:left; }

.rightsidebar { background:blue; width: 170px; float:right; }

.content { width: auto;background:yellow; }

.content input[type='text'] { width: 100%; }


http://jsfiddle.net/v0mp0wgm/

Answer

You can achieve this using flexbox. First, you want to create a containing div for your content, then assign it display: flex;. After that, move your .content div between the left and right sidebar and remove their floats. Then, give your .content and .content input[type='text'] classes a width of 100%; and you should be good to go.

.container {
  display: flex;
}

.leftsidebar { width: 60px; background:red; } 

.rightsidebar { background:blue; width: 163px;} 

.content { width: auto; background:yellow; width: 100%; }

.content input[type='text'] { width: 100%; }
<div class="container">
  <div class="leftsidebar">a</div>
  <div class="content">
    <div>
      <input type="text" style=""/>
    </div>
  </div>
  <div class="rightsidebar">b</div>
</div>

JSFiddle