0

With a row of elements:

[fluid] [FIXED] [fluid]

How can we make the percentage width of the Left and Right elements increase when the width of the Middle element decreases, and vice-versa? Is this possible using pure CSS?

For example: If the Middle element is given width: auto;, and the page renders with the this element being 150px, the Left and Right Elements would fluidly take up the remaining space.

(The div wrapping these elements for example's is 100% wide width: auto;;)

Unfortunately the css must be compatible back to Internet Explorer 8.

Here's a Fiddle

id.ot
  • 3,071
  • 1
  • 32
  • 47
  • I think you want flexbox. – bjb568 Apr 24 '14 at 01:50
  • Herm… I think you need JS, maybe there's a polyfill. – bjb568 Apr 24 '14 at 02:38
  • possible duplicate of [Is there any polyfill for current CSS Flexible Box Layout Module as per W3C CR (display: flex etc.)?](http://stackoverflow.com/questions/13934654/is-there-any-polyfill-for-current-css-flexible-box-layout-module-as-per-w3c-cr) – bjb568 Apr 24 '14 at 02:39
  • @bjb568, If this question is a duplicate I'll be happy to remove it but no, this is certainly not a duplicate of that question, nor do any of the answers or the links in the answers come close to solving my issue. Plus, using flexbox in IE8 wasn't my question. – id.ot Apr 24 '14 at 03:11
  • You just said "I do want flexbox". Questions don't have to have answers to be dupped as - if you have the same question vote up or add a bounty. Please do not remove duplicate questions, they are beneficial to the community. – bjb568 Apr 24 '14 at 03:13
  • Oh yes sir I *would* want flexbox, however I'm looking for css that covers browsers back to IE8 (I initially forgot to mention this, I've updated my question). – id.ot Apr 24 '14 at 03:14
  • So you want flexbox, but don't want flexbox? Wat? – bjb568 Apr 24 '14 at 03:15
  • As my question states, I'm looking for pure CSS. A polyfill is not CSS. Also, a polyfill is more code than using some simple Javascript, which I've already confirmed I can fall back on if necessary. So thank you for the polyfill suggestion but first off I'm unaware one exists and secondly provided I need a fall-back I prefer to use the Javascript snippet I've already created. Thanks again! – id.ot Apr 24 '14 at 03:20
  • 2
    I already said that using flexbox where flexbox isn't supported is impossible. So no CSS solution is possible. If you have already created a JS solution, use it. I personally prefer polyfills because they are easy to use, and people using out-of-date browsers deserve the slow performance while supported browsers don't need to bother with JS at all. – bjb568 Apr 24 '14 at 03:24
  • 1
    On the self-interested level I couldn't agree more about the performance remark/rant. However the 300+ employees in the building next to me use IE8 and evidently (per our internal analytics we still have a percentage of customers how view our pages via IE, so asking them to upgrade to the latest browser has become considerably less important. Thanks for looking at this with us (the community). – id.ot Apr 24 '14 at 03:53

0 Answers0