Make div take remaining width

Question

I have the following code

<div style="float:left;height:16px; background:grey; width:200px;"></div>
<div style="float:left;height:16px; background:lightblue; width:100px;"></div>

Is it possible to make second div take all the remaining width without using tables?

Here is JSFiddle for clarification http://jsfiddle.net/xtkoycyv/

I think you are looking for the `display` propperty. (` display:table;`) — Mike Bovenlander, May 01 '15 at 09:52
Here's another solution to go with the other answers - http://stackoverflow.com/a/6487192/3377049 here's a fiddle I did that fits yours better.. http://jsfiddle.net/Hastig/SpSjL/2881/ — Hastig Zusammenstellen, May 01 '15 at 09:57

Aaron · Answer 1 · 2015-05-01T11:03:14.510

4

yes it is... Remove the float from the second div

<div style="float:left;height:16px; background:grey; width:200px;">this text</div>
<div style="height:16px; background:lightblue;">that text</div>

edited May 01 '15 at 11:03

answered May 01 '15 at 09:49

Aaron

10,187
3
23
39

2

Thanks for the answer, but I have noticed that it works already by only removing float:left. – ZeroCool May 01 '15 at 10:05
lol, you are absolutely correct!!! a div is a block element so will be 100% width by definition. I've updated my answer. – Aaron May 01 '15 at 10:07
@Aaron: This doesn't actually work. This simply makes the appearance of working. The floated element is simply 'sat on top' of the other element, hiding the "lightblue" div behind it. – jbutler483 May 01 '15 at 10:58
@jbutler483 not sure it is mate, it's floated not absolute positioned? added copy to my answer to show it's working. – Aaron May 01 '15 at 11:01
@Aaron: It works in that respect, But take a look at [this](http://jsfiddle.net/jqL3t30z/1/) - it might clear up a few things. since floating elements takes it out of the dom, it makes the other div behave differently. This is why floats would be used as a last resource, as its mechanics can be difficult to follow at the best of times. – jbutler483 May 01 '15 at 11:03
@jbutler483 is he needing to show a hover state then? – Aaron May 01 '15 at 11:06
@Aaron: I am **not** presuming that are, I am merely pointing out that whilst this may appear to (visually) work, behind the scenes the floated element is "sat on top of" the other (full width) div. Maybe include a clarification or explanation as to why this 'works'? – jbutler483 May 01 '15 at 11:09
@jbutler483 OK, I see what you're saying... not sure it's that relevant to what the OP is looking to achieve here though. – Aaron May 01 '15 at 11:45

score 2 · Answer 2 · answered May 01 '15 at 09:52

2

You can use calc() property available in CSS3

<div style="float:left;height:16px; background:grey; width:200px;"></div>
<div style="float:left;height:16px; background:lightblue; width:calc(100% - 200px);"></div>

JSFiddle

answered May 01 '15 at 09:52

Anish Shah

7,669
8
29
40

1

No idea how I've missed knowing about calc until just now. Margin play will be much easier now. – Hastig Zusammenstellen May 01 '15 at 10:08
Is it safe to use calc? – ZeroCool May 01 '15 at 10:09
http://caniuse.com/#feat=calc - known issues. Seems to be 3 things to keep in mind, at least. IE related, of course. – Hastig Zusammenstellen May 01 '15 at 10:12
1

@ZeroCool Yes. You can definitely use it. – Anish Shah May 01 '15 at 10:12

jbutler483 · Answer 3 · 2015-05-01T10:45:13.443

Using Calc

There are a couple of different solution to this. One of which would be to use the calc function.

The calc() function allows mathematical expressions with addition (‘+’), subtraction (‘-’), multiplication (‘*’), and division (‘/’) to be used as component values. The ‘calc()’ expression represents the result of the mathematical calculation it contains, using standard operator precedence rules. It can be used wherever , , , , , or values are allowed. Components of a ‘calc()’ expression can be literal values, ‘attr()’ or ‘calc()’ expressions, or values that resolve to one of the preceding types.

.div1 {
  height: 16px;
  background: grey;
  width: 200px;
  float: left;
}
.div2 {
  height: 16px;
  float: left;
  background: lightblue;
  width: calc(100% - 200px);
}

<div class="div1"></div>
<div class="div2"></div>

Using Display:Table

You could also use the display: table option. note: this is not using tables

.wrap {
  display: table;
  width: 100%;
}
.div1 {
  height: 16px;
  background: grey;
  width: 200px;
  display: table-cell;
}
.div2 {
  height: 16px;
  background: lightblue;
  display: table-cell;
}

<div class="wrap">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

score 0 · Answer 4 · answered May 01 '15 at 09:55

Use calc(100%-1st div)

Div1 - 20% Div2 - 80%

In case if u need to use the remaining width jus use % or jquery function to calculate its width

using script

 $(document).ready(function()
 {
     var div1 = $("div1").width();
     var div2 = (100%) - (div1+'px');
     $(div2).css('width',div2);
 });

score 0 · Answer 5 · answered May 01 '15 at 10:07

0

you can use % instead of px and remove float:left from second div Here is the code:

<div style="float:left;height:16px; background:grey; width:200px;"></div>
<div style="height:16px; background:lightblue; width:100%;"></div>

answered May 01 '15 at 10:07

Tanya Sinha

604
6
15

looks like a duplicate of my answer :) – Aaron May 01 '15 at 10:08

Make div take remaining width

5 Answers5

Using Calc

Using Display:Table