Make a div fill up the remaining width without changing the order of the elements

Question

My question is the same as this one: make a div fill up the remaining width

But I don't want to change the order of the divs.

In my specific case, I'd like to have:

div float: left; width: 100% - 500px; (i.e. this should take up all the remaining space)
div float: right; width: 250px;
div float: right; width: 250px;

I can make this work if I rearrange the order of the divs, but I don't want to do that because on mobile devices I'd like to make the width of all the divs 100% and the order should remain. Is there a way to do this? Is flexbox the only solution?

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Mar 30 '16 at 22:26

Potassium Ion · Accepted Answer · 2016-03-30T22:42:26.070

1

Simply use calc(). Any time the parent div changes size, the 100% will update, and so will calc(). This means that it should be full responsive as well.

.my-div {
    width: calc(100% - 500px);
}

edited Mar 30 '16 at 22:42

answered Mar 30 '16 at 22:28

Potassium Ion

2,075
1
22
39

This only works for about 90% of people: http://caniuse.com/#search=calc – Eliezer Steinbock Mar 30 '16 at 22:49
I suppose I could just do this in a javascript either way. Thanks – Eliezer Steinbock Mar 31 '16 at 15:43
This seems great actually. It's the UC browser that lowers the percentage so much, but doesn't matter for my target countries – Eliezer Steinbock Mar 31 '16 at 16:05

score 1 · Answer 2 · answered Mar 30 '16 at 22:31

1

try the following, it is also responsive!

.w-250{
    width: 250px;
    height: 75px;
    
    float: right;
    border: 1px solid red;
}
#r-boxer{
    overflow: hidden;
}
#r-elem{
    width: 99%;
    height: 75px;
    
    border: 1px solid blue;
}

<div id="container">
  <div class="w-250">Width 250px;</div>
  <div class="w-250">Width 250px;</div>
  <div id="r-boxer"><div id="r-elem">Remaining Space</div></div>
</div>

answered Mar 30 '16 at 22:31

Gacci

1,388
1
11
23

What I want is something like that except r-boxer should be first, and then the 250px boxes – Eliezer Steinbock Mar 31 '16 at 15:43

Make a div fill up the remaining width without changing the order of the elements

2 Answers2