Geek Answers Handbook

CSS: fluid text input with floating right button

I am trying to create liquid text input with the submit button on the right. Login and button should fill 100% of your container.

Here is an example of what I'm trying to achieve: http://jsfiddle.net/t7tgJ/

The problem that I am facing is that the input stream fills its container, I need to give it the width of the liquid, for example, 100%. However, if I float on the button on the right, I will need to reduce this width by about 90% so that the button can fit. But this only works for one viewport size.

I want something like

input { width: 100% - {button.width}; }
button { float: right; }

or, in plain English, my entry should go to the right button and stay that way at any size of the viewport.

+5
source share
7 answers

Despite the fact that they all expressed good ideas, I had problems so that the various proposals looked consistent in browsers. After repeating on this bunch, I came up with the following solution, which looks good for everything> IE7 and does not require any additional containers.

http://jsfiddle.net/tjlahr/hUeZS/

Basically the solution for me was:

1) button { float: right; position: relative; top: -28px; }

2) Use browser reset to undo some additional add-ons and fields that are added to the button element.

3) Set the input height and buttons to further save sizes between browsers.

+2
source

- ? fiddle , :-) , ...

+2

, 2 .

1) display: flex flex-grow: 1 .

2) overflow: hidden . input.

+1

, . JSFiddle

  • float: right
  • width: 100% div overflow: hidden

HTML

<a href="#" class="search-btn">Search</a>
<div class="search-field-wrap">
  <input class="search-input" type="text" name="search">
</div>

CSS

.search-btn {
    float: right;
}
.search-field-wrap {
    overflow: hidden;
}
.search-input {
    width: 100%;
}
0

thomas

http://jsfiddle.net/hUeZS/147/

Instead of using top: -28px try margin-top: -28px. This is better in my case, because the element below it still gets the full width and will not be affected.

...

form button {
    /* style */
    background-color: lightblue;
    border: none;
    padding: 7px;

    /* to match input height above */
    height: 28px;

    /* removes the box from DOM */
    float: right;

    /* alternative to negative margin-top,
    which seems to hide my button behind the input */
    position: relative;
    top: 0px;
    margin-top: -28px;
}

...
0
source

More articles:


All Articles