Want HTML element to take up as much width as possible - html

Question

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:
the prompt '>>' which is pushed all the way to the left
the input text area, just a place to type input into
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>

Answer 1

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-).

Answer 2

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>

Answer 3

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
}

Answer 4

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;
}