Responsive method for making a div take up the remaining available space

Question

I'm currently trying to create a responsive form with an text field and a button next to each other, where the text field takes up the maximum available space and the button just uses what it needs.

This tutorial is what I've used so far to achieve this and its worked perfectly.

My issue is that this isn't really a responsive solution as if you remove the float using a media query to stack the field and button on top of each other, the button stacks on top of the text field instead of the other way around.

Here's a flexbox example I quickly whipped up. This is exactly how I need it to function but in a way that will work on IE8+ please.

Thank you

-

EDIT:

The button is content managed so using calc will not work in this instance & could contain multiple words which cannot break onto two+ lines.

Using percentage widths do not take into account the text inside the button. The button only needs to be the width of the text & padding. With a percentage there will either be excessive spacing on the button or there's a chance that multiple words inside the button will break onto two lines, I really need to keep them on one line which is where the non-responsive solution in my question comes in really handy. Unfortunately I really need it to be responsive. The button will always stay the same width no matter what size the container is, just the textbox that needs to adjust.

Does anyone know a way of achieving this please Preferably >IE8 (so no flexbox unfortunately)

-

What I have so far

https://jsfiddle.net/ncpk6qp9/

.container {
  width: 300px;
  border: 1px solid;
}
.left {
  width: auto;
  background: red;
  overflow: hidden;
}
.right {
  width: auto;
  background: blue;
  float: right;
}
.textbox {
  width: 100%;
}
@media only screen and (max-width: 300px) {
  .right {
    float: none;
  }
}

<div class="container">
  <div class="right">
    <input type="submit" />
  </div>
  <div class="left">
    <input type="text" class="textbox" />
  </div>
</div>

Well, you can use percentage as width... http://jsfiddle.net/A8zLY/3259/ — Henrique M., Dec 17 '15 at 17:44
Using percentage width will not take into account the text inside the button. The button only needs to be the width of the text and padding. With a percentage there will be excessive spacing on the button and there's a chance that if there's quite a few words inside the button then the words will break onto two lines, I really need to keep them on one line which is where the non-responsive solution comes in really handy. Unfortunately I really need it to be responsive. — Oliver Evans, Dec 17 '15 at 18:16
I've added a flex box example to show you the exact functionality i'm looking for https://jsfiddle.net/gouez6hk/1/ — Oliver Evans, Dec 17 '15 at 18:38

score 2 · Answer 1 · edited Dec 18 '15 at 01:18

2

You can use percentage as width and display: inline-block;

Also, make sure you use font-size: 0px on the wrapper to remove inline-block spaces.

.container {
    width:600px;
    height:200px;
    border:2px solid yellow;
    font-size: 0px;
}

.left {
    width:70%;
    height:200px;
    background:red;
    overflow:hidden;
    display: inline-block;
}
.right {
    height:200px;
    width:30%;
    background:blue;
    display: inline-block;
}

JSFiddle link

edited Dec 18 '15 at 01:18

k0pernikus

60,309
67
216
347

answered Dec 17 '15 at 17:52

Henrique M.

512
2
14

Using percentage widths do not take into account the text inside the button. The button only needs to be the width of the text & padding. With a percentage there will either be excessive spacing on the button or there's a chance that multiple words inside the button will break onto two lines, I really need to keep them on one line which is where the non-responsive solution in my question comes in really handy. Unfortunately I really need it to be responsive. The button will always stay the same width no matter what size the container is, just the textbox that needs to adjust. Thanks anyway – Oliver Evans Dec 17 '15 at 18:19
You could set max-width instead – Henrique M. Dec 17 '15 at 18:31
I won't know the width of the button unfortunately, the component needs to be as reusable as possible. I've made a quick flex box version to show the exact functionality I'm looking for, but obviously I need an alternative solution or workaround for older browsers that don't support flexbox. https://jsfiddle.net/gouez6hk/1/ Please can you take a look? – Oliver Evans Dec 17 '15 at 18:39

score 0 · Answer 2 · answered Dec 18 '15 at 18:03

I can not test in old IEs, but I think that setting the div to position: relative when you reset the float should work.

I have changed the media query to work on hover, it's easier to check

.container {
  width: 300px;
  border: 1px solid;
}
.left {
  width: auto;
  background: red;
  overflow: hidden;
}
.right {
  width: auto;
  background: blue;
  float: right;
}
.textbox {
  width: 100%;
}
.container:hover  .right {
    float: none;
    position: relative;
    top: 20px;
  }

<div class="container">
  <div class="right">
    <input type="submit" />
  </div>
  <div class="left">
    <input type="text" class="textbox" />
  </div>
</div>

Responsive method for making a div take up the remaining available space

2 Answers2