1

I had faced with tricky problem, I need to place two divs in one line (left, right), right must have fixed width, but left must fill free space, in another words: left div must have 100% - X pixels, right div should be X pixels.

Important point: without position relative/absolute hack.

Is there any way to achieve this result. I have tried in many ways but without luck.

here is jsfiddle

Markup

<html>
<head>
    <title></title>
</head>
<body>
    <style>
        .container {
            /* container don't matter */
            width: 500px;
            background-color: bisque;
            height: 50px;
        }

            .container .left {
               /* display: inline-block; */ 
                margin-right: 50px;
                background-color: burlywood;
                height: 50px;
            }

            .container .right {
                float: right;
                background-color: chartreuse;
                width: 50px;
                height: 50px;
            }
    </style>
    <div class="container">
        <div class="left">
            fill free space (100% - right)
        </div>
        <div class="right">
            fixed width
        </div>
    </div>
</body>
</html>
testCoder
  • 7,155
  • 13
  • 56
  • 75
  • You might also want to consider: http://stackoverflow.com/questions/4028833/two-divs-left-should-be-fixed-width-right-should-fill-rest-of-space?rq=1 – Hashem Qolami Sep 14 '14 at 20:14

1 Answers1

2

You could do it like this:

JSFiddle - DEMO

CSS:

.container {
    width: 500px;
    background-color: bisque;
    height: 50px;
    display: table;
}
.container .left {
    background-color: burlywood;
    height: 50px;
    display: table-cell;
    width: 100%;
}
.container .right {
    background-color: chartreuse;
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: text-top;
}
Anonymous
  • 10,002
  • 3
  • 23
  • 39
  • You need to set `display: inline-block;` and `vertical-align: text-top;` to your `.container .right` then it will works fine... :) – Anonymous Sep 14 '14 at 18:50
  • 1
    Mary, there are alternatives to achieve the end goal. It's possible even by using CSS floats. Actually CSS tables have their own pros and cons which may or may not cause trouble in the progress of the project. – Hashem Qolami Sep 14 '14 at 18:50
  • @HashemQolami yes, your're right, for example If you set `table-cell` to `.right` then width won't work but I've set `display: inline-block;` to `.right` and now it does work and sorry I really don't know any other solution to achieve it. Thanks! :) – Anonymous Sep 14 '14 at 18:56
  • 1
    @MaryMelody You could try adding `table-layout: fixed` declaration to the table in order to fix the width issue, See: http://jsfiddle.net/hashem/kebw9umL/6/ – Hashem Qolami Sep 14 '14 at 19:00
  • 1
    And by using CSS Floats, you could simply float the `.right` element to the right and give the `.left` an `overflow` of `hidden`; However you should reverse the order of columns within HTML. Verify that: http://jsfiddle.net/hashem/kebw9umL/7/ – Hashem Qolami Sep 14 '14 at 19:03
  • @HashemQolami Thanks so much! but I want to know one more thing. Why `min-height` doesn't work with `display: table-cell;` - [DEMO](http://jsfiddle.net/kebw9umL/8/) but if you set `display: inline-block;` to one child then it does work and how can I fix this issue by using `display: table-cell;`? – Anonymous Sep 14 '14 at 19:09
  • 1
    This is because `min-height` is not applicable to table-cell elements. The spec [states](http://www.w3.org/TR/CSS2/visudet.html#min-max-heights): `Applies to: all elements but non-replaced inline elements, table columns, and column groups`. And the solution would be using `min-height` on the table itself: http://jsfiddle.net/hashem/kebw9umL/10/ But just an advise, try staying away from Tables for layout purposes, they are not designed to do so :) – Hashem Qolami Sep 14 '14 at 19:13
  • 1
    @MaryMelody Don't mention it. I'd be happy to share things :) – Hashem Qolami Sep 14 '14 at 19:24