Left input takes all available space

Question

I know this questions has already been answered before and I've read the topics :

However I can't manage to implement them in my case or they simply don't seem to work as I try to have a fix width on the right and a flexible width on the left (unlike the above examples).

Here is my problem (which is fairly simple) : I have a form with a search field (left) and a span element (right). The span element has a fixed width and height. I want the input to fit the remaining left space.

form :

<div id="container">
    <form>
        <input type="search" />
        <span class="submit"></span>
    </form>
</div>

style.css :

#container {
    width: 300px;
}

[type="search"] {

        /* Positionning
         * ------------ */
        display: block;
        height: 40px;
        padding: 0px 10px;
        vertical-align: top;
    }

    .submit {
        /* Positionning
         * ------------ */
        display: block;
        height: 40px;
        width: 50px;

        /* Styling
         * ------- */
        background-color: #CF0526;
    }

From what I've read, I thought that a width: 100%; overflow: hidden on the input and a float: right on the span who be enough, sadly not. Here is a jsfiddle of my problem, hopefully it may help you.

EDIT: I changed the title from "left div" to "left input" as it may matter, especially since this solution does not work while it looks accurate for divs positionning.

@caramba Thanks for your answer. I could achieve this result too but couldn't get further (aligned span and input). — Simon, Dec 17 '13 at 12:57

score 1 · Answer 1 · answered Dec 17 '13 at 12:47

You can try with the property calc like this:

input[type="search"] {
  width: calc(100% - 40px);
  margin:0;
  padding:0;
  height:30px;
  float:left;
}
.submit {
  float:left;
  width: 40px;
  height: 30px;
  background-color: red;
}

The demo http://jsfiddle.net/SL3FB/10/ ... Maybe a problem the compatibility

Another solution using box.sizing who has more compatibility: http://jsfiddle.net/SL3FB/18/

score 1 · Answer 2 · answered Dec 17 '13 at 12:49

You can substract the width from the span to the width from the textfield which is 100%.

Here is the fiddle http://jsfiddle.net/SL3FB/15/.

Code is like this:

width:calc(100% - 50px);
float:left;

Make 'em both float:left; to have a better result! Hope this works for you.

Danield · Answer 3 · 2013-12-18T08:13:49.690

Use CSS Tables

1) Set display: table-cell for both the input and the span

2) Set a fixed width on the span and (the trick:) width:100% on the input

FIDDLE

#container {
    width: 300px;
    border: 1px solid black;
}
form
{
    display:table;
    width: 100%;
}
.submit {
    display:table-cell;
    width: 40px;
    height: 30px;
    background-color: red;
}
input
{
    width: 100%;
    display:table-cell;    
}

score 0 · Answer 4 · answered Dec 17 '13 at 12:45

0

Does this work for you?

http://jsfiddle.net/SL3FB/4/

I've given your search a width of 85% so it fits up agains the red box.

.search {
    width:85%;
}

answered Dec 17 '13 at 12:45

man

229
3
15

Thanks for your answer, however I can't set a fixed width to the search container as the purpose of my problem is to have a flexible search bar. – Simon Dec 17 '13 at 12:53

Left input takes all available space

4 Answers4