-1

I have this setup:

http://jsfiddle.net/Uq46e/18/

<div class="wrapper">

    <div class="a">1</div>
    <div class="a">2</div>
    <div class="a">3</div>
    <div class="x"></div>
    <div class="a">5</div>
    <div class="a">6</div>

</div>

I want div class x to occupy remaining width (wrapper minus other elements). Parent wrapper needs to stay responsive.

Is it possible with just css?

edit:

updated the question (all elements are left floated)

Toniq
  • 4,492
  • 12
  • 50
  • 109
  • possible duplicate of [Expand div to take remaining width](http://stackoverflow.com/questions/1260122/expand-div-to-take-remaining-width) – Paulie_D Jul 25 '14 at 20:58

2 Answers2

0

You could use calc attribute on your css width rule:

width: calc(100% - 250px);

250px is the amount of all your other widths.

JSfiddle

Here's a solution that mimic's CSS calc so that it is usable in IE8:

$('.x').css('width', '100%').css('width', '-=250px');

JSfiddle with Javscript

Mathias Rechtzigel
  • 3,596
  • 1
  • 18
  • 37
  • 1. It needs to work on all browsers, 2. I cannot have defined width for div x because some of the elements left or right of it might be removed. – Toniq Jul 25 '14 at 20:58
  • not possible without JS / JQuery. You're going to have to calculate the widths of the other items and then do something like $('.x').css('width', '100%').css('width', '-=250px'); http://jsfiddle.net/MathiasaurusRex/Uq46e/24/ – Mathias Rechtzigel Jul 25 '14 at 21:39
0

Add below given class and then check

.x {
background: green;
width: calc(100% - 250px);
height: 50px;
float: left;
}

I tested it on your fiddle.

Mohinder Singh
  • 1,848
  • 1
  • 13
  • 14