4

I am trying to make the label and input field appear on the same line, with a variable width input field that will expand based on the space available

http://jsfiddle.net/chovy/WcQ6J/

<div class="clearfix">
    <aside>foo</aside>
    <span><input type="text" value="Enter text" /></span>
</div>

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both;
}

div {
    border: 1px solid red;
}

aside {
    display: block;
    width: 100px;
    background: #eee;
    float: left;
}

span {
    display: block;
    width: 100%;
    background: #ccc;
}

input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #000;
}

It works fine with a span, but when I add input it wraps to next line.

1

5 Answers 5

2

Here is some whacky solution. I honestly don't really understand why this works. I had it in an old codepen. Good luck!

http://jsfiddle.net/sheriffderek/DD73r/

HTML

<div class="container">

  <div class="label-w">
    <label for="your-input">your label</label>
  </div>

  <div class="input-w">
    <input name="your-input" placeholder="your stuff" />
  </div>

</div> <!-- .container -->

CSS

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  width: 100%;
  float: left;
  height: 2em;
}

.label-w {
  width: 8em;
  height: 100%;
  float: left;
  border: 1px solid red;
  line-height: 2em;
}

.input-w {
  float: none; /* key */
  width: auto; /* key */
  height: 100%;
  overflow: hidden; /* key */
  border: 1px solid orange;
}

.input-w input {
  width: 100%;
  height: 100%;
}
4
  • How about a text indent and an absolute positioned label about the size of that indent?
    – nouveau
    Aug 6, 2013 at 17:15
  • The key here was adding overflow: hidden to the input wrapper. Not sure what side effects that creates, but works for now.
    – chovy
    Aug 6, 2013 at 20:28
  • You should try throwing a micro clear fix on that and see if it acts the same. Aug 7, 2013 at 1:47
  • The overflow:hidden trick creates the side-effect that you lose control over the input field's borders. The right-most border will never be shown, for example. Try adding margins to the input field and you'll see what happens.
    – Teekin
    Jan 16, 2015 at 16:40
2

You could use the CSS calc property to determine the width minus the borders and aside width:

input {
  width: calc(100% - 102px); /* 100% minus (aside width (100px) + border width (2px)) */
  box-sizing: border-box;
  border: 1px solid #000;
}

FIDDLE

2

You could use display: table-*:

div {
    display: table;
    width: 100%;
    background-color: #ccc;
}
aside {
    display: table-cell;
    width: 100px;
    background: #eee;
}
span {
    display: table-cell;
    background: #bbb;
}
input {
    display: block;
    width: 100%;
    background-color: #ddd;
}

http://jsfiddle.net/userdude/WcQ6J/5/

This is a little bit more compatible (and flexible) that display: inline-block, which is not supported in IE8.

0

You can set the width of the "aside" to pixels and the span to a percent, but, as you've seen, that will cause problems. It's easier to set both to a percent. Also, "inline-block" will put your elements in line. You can use this or "float: right;", but I prefer setting the display.

aside {
    display: inline-block;
    width: 9%;
}

span {
    display: inline-block;
    width: 90%;
}

See jsfiddle.

0

In case you want a truly variable width input field, so that you can manually adjust its width to fill the entire page, or to any other convenient width, why not make that input element fill 100 % of a resizable div?

CSS:

<style>
   div.resize {
      width: 300px; /*initial width*/
      resize: horizontal;
      overflow: auto;
   }

HTML:

<div class="resize">
   <input style="width: 100%" />

The little triangle to drag to resize the div will appear in the lower-right corner of the input element!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.