CODEWITHSUNDEEP
htmlcss
Sam Bryant
Sam Bryant

Reputation: 11

Want HTML element to take up as much width as possible

So I'm trying to create an input prompt similar to the python interpreter

It's supposed to be a single line with 3 parts:

  1. the prompt '>>' which is pushed all the way to the left

  2. the input text area, just a place to type input into

  3. the submission button which is pushed all the way to the right

My problem is that I want the 2nd element to automatically use all of the remaining width that the other two elements are not using.

Here is the closest I've gotten, it's almost right, except ideally the input text area would extend all the way to the button. I'd also like to be able to do it without hard-coding widths

#top-container {
  width: 600px;
}
#input-prompt {
  /* nothing */
}
#input-area {
  display: inline;
  background-color: #DDDDDD;
}
#input-button{
  float: right;
}
<div id="top-container">
  <!-- Part 1, the prompt '>>' -->
  <label id="input-prompt">
    >>
  </label>
  <!-- Part 2, the text input area -->
  <div id="input-area" contenteditable>
    (this should be wider)
  </div>
  <!-- Part 3, the submission button -->
  <button id="input-button">Submit</button>
</div>

Upvotes: 1

Views: 2698

Answers (4)

Pbk1303
Pbk1303

Reputation: 3802

You can use display:table for the container ,please see below

CSS:

#top-container {
    width: 600px;
    display:table;
  }
  #input-prompt {    
    background-color: red;
    display: table-cell;
  }
  #input-area {
      width:100%;
    display: table-cell;    
    background-color: #DDDDDD;

  }
  #input-button{  
    background-color:yellow;
    display: table-cell;
  }


#top-container {
    width: 600px;
    display:table;
  }
  #input-prompt {    
    background-color: red;
    display: table-cell;
  }
  #input-area {
      width:100%;
    display: table-cell;    
    background-color: #DDDDDD;
    
  }
  #input-button{  
    background-color:yellow;
    display: table-cell;
  }
<div id="top-container">
  <!-- Part 1, the prompt '>>' -->
  <label id="input-prompt">
    >>
  </label>
  <!-- Part 2, the text input area -->
  <div id="input-area" contenteditable>
    (this should be wider)
  </div>
  <!-- Part 3, the submission button -->
  <button id="input-button">Submit</button>
</div>

Upvotes: 3

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

Here is an example code that does the trick: 

  #top-container {
    width: 600px;
  }
  #input-prompt {
    float: left;
  }
  #input-area {
    overflow: hidden;
    background-color: #DDDDDD;
  }
  #input-button{
    float: right;
  }
<div id="top-container">
  <!-- Part 1, the prompt '>>' -->
  <label id="input-prompt">
    >>
  </label>  
  <!-- Part 3, the submission button -->
  <button id="input-button">Submit</button>
  <!-- Part 2, the text input area -->
  <div id="input-area" contenteditable>
    (is it OK now?)
  </div>
</div>
Block with overflow:hidden establishes new block formatting context and thus can't overlap floats, so nearly all browsers place it next to floats and make it use all available space.

Alternatively, you can achieve the same layout with Flexboxes, but their browser support is still not ideal (especially IE9-).

Upvotes: 3

Kwebble
Kwebble

Reputation: 2075

This reserves fixed areas for the prompt and button and makes the input box cover the remaining area:

#top-container {
    position: relative;
    width: 600px;
}
#input-prompt {
    display: inline-block;
}
#input-area {
    position: absolute; top: 0; left: 1.5em; right: 4.5em;
    background-color: #DDDDDD;
}
#input-button{
    position: absolute; top: 0; right: 0;
}

Upvotes: 0

Hevlastka
Hevlastka

Reputation: 1948

You could try this:

#top-container {
  width: 600px;
}

#input-area {
  display: inline-block;
  background-color: #DDDDDD;
  width:89%;
}

#input-area:before{
  content:'>>'
}

#input-button{
  display:inline-block
}

Upvotes: 0

Related Questions