Fluid divs - left fluid with inside fluid and fix, right fix

Question

I have HTML structure

<div class="wraper">
        <div class="lewy-fluid">
            <div class="lewy-fluid-fluid">
                TITLE
            </div>
            <div class="lewy-fluid-fix">
                Kontakt
            </div>
        </div>
        <div class="prawy-fix">
            Czat
        </div>
    </div>

And need to make:

 _____________________________________________________________________________
| .LEWY-FLUID                                         | .PRAWY-FIX            |

and inside .LEWY-FLUID:

 _________________________________________________________
| .LEWY-FLUID-FLUID              | .LEWY-FLUID-FIX       |

So I have fluid and fixed div and inside that fluid div I also have fluid and fixed div.

How can I make things inside .LEWY-FLUID to be how I want to?

fiddle link: http://fiddle.jshell.net/ozeczek/hu4JH/

Do you mean something like this? http://fiddle.jshell.net/aY3E3/ — Joe_G, Aug 07 '13 at 15:28
Not exacly, because you have used % for fix divs. I need pixel values for them — norbert, Aug 07 '13 at 15:32
Ok how about this? http://fiddle.jshell.net/5kXHR/ I found it after looking here:http://stackoverflow.com/questions/5195836/2-column-div-layout-right-column-with-fixed-width-left-fluid — Joe_G, Aug 07 '13 at 16:10
Yay, thank you soo much. Looks perfect! :) i think you should make it as answare to let me make thick — norbert, Aug 07 '13 at 16:30

score 2 · Answer 1 · answered Aug 07 '13 at 15:50

How about trying Flexbox? Right now I can only test on the latest version of browsers, but this seems to work fine and accomplish what you need:

HTML:

<div class="wrap">
  <div class="fluid wrap">
    <div class="fluid"></div>
    <div class="fixed"></div>
  </div>
  <div class="fixed"></div>
</div>

CSS:

.wrap {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.wrap div {
  height: 5em;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
   flex: 1 1 auto;
}
.fluid {
  background: tomato;
  width: 100%;
}
.fixed {
  background: beige;
  width: 150px;
  min-width: 150px;
}
.fluid.wrap .fluid {
  background: orange;
}
.fluid.wrap .fixed {
  background:tomato;
}

Fiddle: http://jsfiddle.net/xdLPZ/2/

That's exactly what i needed, but I have to support old ie, so it's better for me to use old methods and don't write code twice. But thank you very much for this solution! :) — norbert, Aug 07 '13 at 16:23

score 2 · Accepted Answer · edited May 23 '17 at 12:20

I checked here and found a solution to the problem you are having. The main trick here is flipping the order of the divs (put the fixed right div first in your html, then the fluid left div after that).

<div class="wraper">
    <div class="prawy-fix">Czat</div>
    <div class="lewy-fluid">
        <div class="lewy-fluid-fix">Kontakt</div>
        <div class="lewy-fluid-fluid">Headshot media</div>
    </div>
</div>

Then for your css, set your fixed divs with float:right and your desired width, and your fluid divs to have width:auto and overflow:hidden so they take up the remaining space.

Demo: http://fiddle.jshell.net/5kXHR/

For more about why you should use overflow:hidden, read here.

Fluid divs - left fluid with inside fluid and fix, right fix

2 Answers2