0

I know there are similar questions, but I was not able to find answer to my question.

I have two divs next to each other, left is fixed width of 220px and right should take up the rest of the space. The trick is that the right one contains a table that should be fluid too and always stay as wide as it can.

I tried it even without right div, so there was div on left and table on right. If I don't give the table set width of 100% its fine, but then table stays at about 150px, and does not occupy all free space (as table changes size based on content).

Here is the JSFiddle: http://jsfiddle.net/4tchm0r9/6/

.wrapper {
  width: 100%;
  max-width: 800px;
}
.left {
  border: 1px solid green;
  float: left;
  width: 220px;
}
.right {
  width: 100%;
  border: 1px solid red;
}
<div class="wrapper">
  <div class="left">
    <div>
      Some random irrelevant div that has fixed width of 220px no matter what and contians two divs.
    </div>
    <div>
      Ladidaaaa? Maybe? Lolz.
    </div>
  </div>
  <table class="right">
    <tr>
      <td>
        Table that should occupy the rest of the space and fluidly resize!
      </td>
    </tr>
    <tr>
      <td>
        Table that should occupy the rest of the space and fluidly resize!
      </td>
    </tr>
  </table>
</div>

Thanks for any help. I Googled, but haven't found nothing.

Ps.: I can not set both of them to % or use table for it, as depending on device size, I will be swapping their positions (the two divs on left will go next to each other and the one on right will go below them). I also can not use calc function for backwards compatibility, no JS too. Pure HTML and CSS required.

MiChAeLoKGB
  • 796
  • 14
  • 38
  • Possible duplicate of http://stackoverflow.com/questions/2434602/css-setting-width-height-as-percentage-minus-pixels – JCOC611 Apr 05 '15 at 01:37
  • I don't have older IE with which to test, but this seems to be what you want: http://jsfiddle.net/davidThomas/4tchm0r9/4/? Though having said that, I'm not sure I'm understanding your post-script; so perhaps not. – David Thomas Apr 05 '15 at 01:43
  • @DavidThomas If you look at it closely, the table does not fill in the whole space :) I think Ill edit the JSFiddle so you would clearly see what I need. – MiChAeLoKGB Apr 05 '15 at 01:45
  • @knite: compatibility with older IE is required, hence the inability to use `calc()`. – David Thomas Apr 05 '15 at 01:46
  • @DavidThomas never heard of IE, did you? – knitevision Apr 05 '15 at 01:50
  • @knitevision Flexbox can not be used, I tried it once with different thing and you have no bloody control over its sorting and positioning elements top->down instead lf left->right. And Calc cannot be used too. – MiChAeLoKGB Apr 05 '15 at 01:51

3 Answers3

1

Did you tried use table properties? The .wrapper can be the table, then their children will be the cells. Look:

.wrapper{
    width: 100%;
    display: table;
}

.left{
    border: 1px solid green;
    width: 220px;
    display: table-cell;
}

.right{
    border: 1px solid red;
    display: table-cell;
}
<div class="wrapper">
  <div class="left">
    <div>
      Some random irrelevant div that has fixed width of 220px no matter what and contians two divs.
    </div>
    <div>
      Ladidaaaa? Maybe? Lolz.
    </div>
  </div>
  <table class="right">
    <tr>
      <td>
        Table that should occupy the rest of the space and fluidly resize!
      </td>
    </tr>
    <tr>
      <td>
        Table that should occupy the rest of the space and fluidly resize!
      </td>
    </tr>
  </table>
</div>

Fiddle: http://jsfiddle.net/83295cvs/

Rafael Almeida
  • 677
  • 7
  • 21
  • I was thinking about that and that could work, but then for changing their positions on device resolution would require longer CSS, but it actually looks like there is no better option that old good tables, even fake ones. – MiChAeLoKGB Apr 05 '15 at 01:54
  • Yeah I know how to do that, there are bit more divs in that that will be repositioned, tho, but that NP for me. Anyway, as I told, this looks like only option. I knew about it, I just hoped there is some other way. – MiChAeLoKGB Apr 05 '15 at 02:02
0

Add both of those divs to a 100% parent container, with position set to relative. Then, the fixed div with width of 200px should be absolutely positioned on the top left, and add padding-left to the right div equal to the left div's width.

http://jsfiddle.net/z12p0b5v/

HTML:

<div class="container">
    <div class="left">
        <div class="content"></div>
    </div>
    <div class="right">
        <div class="content"></div>
    </div>
</div>

CSS:

.container {
    width: 100%;
    position: relative;
}

.left {
    position: absolute;
    left: 0;
    top: 0;
}

.left .content {
    width: 200px;
    height: 200px;
    background-color: red;
}

.right {
    padding-left: 200px;
}

.right .content {
    background-color: blue;
    width: auto;
    height: 300px;
}
Amar Syla
  • 3,523
  • 3
  • 29
  • 69
  • Hmmm, this one is an option too, but the left div will be taken offflow of the site, wich is not desired... Looks like Ill have to go with fake tables. – MiChAeLoKGB Apr 05 '15 at 02:07
  • You could use some jQuery addition. That would be better than using tables. – Amar Syla Apr 05 '15 at 02:12
  • As I told in my question, it has to be pure CSS, no JS and it has to be compatible with older IE versions, so also no calc. Othervise I would not be asking here. – MiChAeLoKGB Apr 05 '15 at 02:13
0

Just put table with width:100% into a div with display:flex

.wrapper{
    width: 100%;
    max-width: 800px;
}

.left{
    border: 1px solid green;
    float: left;
    width: 200px;
}

.right{
    border: 1px solid red;
    width: 100%;
}
<div class="wrapper">
    <div class="left">
        <div>
            Some random irrelevant div that has fixed width of 220px no matter what and contians two divs.
        </div>
        <div>
            Ladidaaaa? Maybe? Lolz.
        </div>
    </div>
    <div style="display: flex;">
    <table class="right">
        <tr><td>
            Table that should occupy the rest of the space and fluidly resize!
        </td></tr>
        <tr><td>
            Table that should occupy the rest of the space and fluidly resize!
        </td></tr>
    </table>
    </div>
</div>
DrKey
  • 3,365
  • 2
  • 29
  • 46
  • Unusable for backwards compatibility and multiple elements in there (as flex uses top to bottom order instead of left to right). – MiChAeLoKGB Apr 05 '15 at 02:27