CODEWITHSUNDEEP
cssinputhtml
Simon
Simon

Reputation: 1719

Left input takes all available space

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.

Upvotes: 3

Views: 2032

Answers (4)

Danield
Danield

Reputation: 125513

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

Upvotes: 1

Moduo
Moduo

Reputation: 623

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.

Upvotes: 1

DaniP
DaniP

Reputation: 38252

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/

Upvotes: 1

man
man

Reputation: 229

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

Upvotes: 0

Related Questions