CODEWITHSUNDEEP
css
Evanss
Evanss

Reputation: 23543

Input and div side by side with input taking up all available width?

For a responsive site I want a div and an input to sit side by side, and I want the input to take up all the available width and not wrap onto the next line.

I want the div to be a fixed width or determined by its content, I dont want to set a % width for the div.

So I have this:

enter image description here

But I want this:

enter image description here

<div class="cont">
  <div class="stuff">Stuff</div>
  <input value="something" >
</div>
.cont {
  width: 20%;
  margin: auto;
  border: 1px solid grey;
  overflow: auto;
}
.stuff {
  background: blue;
  height: 200px;
  float: left;
  width: 100px
}
input {
  float: right;
  display: block;
}

Upvotes: 1

Views: 130

Answers (2)

j08691
j08691

Reputation: 207861

If you wrap your input in a span and apply this CSS it should work:

jsFiddle example

<div class="stuff">Some text</div>
<span><input type="text" value="something" /></span>
div {
    background: #00f;
    float: left;
    height: 200px;
}
span {
    display: block;
    overflow: hidden;
    padding-left: 10px;
}
input {
    width: 100%;
}

Upvotes: 2

DaniP
DaniP

Reputation: 38252

If you don't have to support IE9 or lower Use calc() property like this:

input {
  width:calc(100% - 100px);
  box-sizing:border-box;
}

Check this Demo Fiddle

Complement with box-sizing to keep away issues with border and padding

Upvotes: 0

Related Questions