Position an element over a table-row element

Question

I have a list of .message whose display is table-row. Some of those messages should have a red triangle over them, at the bottom center. The element containing the triangle can't be inside a cell of the .message.

It's easy to do when the .message display is block but I can't seem to be able to do it with a table-row. As you can see in my fiddle, all the triangles are at the same wrong position and the second cell doesn't extend to the whole row (it does if I remove the .opener element).

What am I missing ?

Fiddle for the tests (and clarity)

Hover the left cells with your mouse to get why I want to have table-cell elements. To be more precise I need the whole range of positioning and dimension advantages of table-cell elements (same height for both cells, for example, and the right cell must fill the remaining space of the row).

Compatibility needed : Firefox and Chrome

please check this http://jsbin.com/uxiMoqeN/8/ , not sure if you want exactly this — Deepanshu Goyal, Feb 04 '14 at 10:56
@Deepanshu As stated in the question, I don't want the triangle to be in a cell. — Denys Séguret, Feb 04 '14 at 11:17
what about this way then ? http://jsbin.com/uxiMoqeN/9/ ? I used float:left for class u and c, relative for the opener and made it span — Deepanshu Goyal, Feb 04 '14 at 11:18
@Deepanshu If you use `float`, you lose all the advantages (dimensions, vertical positionning) of the cells. I edited the question to make that point clearer. — Denys Séguret, Feb 04 '14 at 11:29
Also, check out [this question](http://stackoverflow.com/questions/8501727/table-row-wont-contain-elements-with-positionabsolute) — Danield, Feb 04 '14 at 12:18
@Danield And are you able to get that layout (including the vertical positionning and full height cells) with table rows ? I'm not. — Denys Séguret, Feb 04 '14 at 12:18
Well actually, I think it is possible to get this layout without table rows. Could you define exactly the layout you need. eg first cell - fixed size, second cell - fill remaining width ... etc — Danield, Feb 04 '14 at 12:22
@Danield I edited. I also changed the fiddle. Today I achieve about the same layout without table-cell, I'm pondering the use of those table-cell styles to ensure the left cell covers the whole height of the row and give it a vertical middle alignment. — Denys Séguret, Feb 04 '14 at 12:29

score 2 · Accepted Answer · answered Feb 04 '14 at 13:22

2

You can get this layout with flexbox

FIDDLE

CSS

#b {
    width:100%;
    list-style: none;
}
.m {
    display: flex;
    align-items: center;
    align-content: center;
    position: relative;
    background: #789;
    border-top: thin solid #ccc;
}
.u {
    width: 100px;
    float:left;
    opacity:.999;
}
.u:before
{
    content: '';
    width: 100px;
    height: 100%;
    display: block;
    position: absolute;
    top:0;
    z-index:-1;
}
.c {
    overflow: hidden;
    width: calc(100% - 100px);
}

.u:hover:before, .c:hover {
    background: yellow;
}
.opener {
    width: 16px;
    text-align: center;
    cursor: pointer;
    color: red;

    left:0;right:0;
    bottom:0;
    margin: auto;
    z-index: 0;
    position: absolute;
}
.opener:before {
    content:'▼';
    display: block;
}

answered Feb 04 '14 at 13:22

Danield

106,624
34
201
230

1

+1. I have many tests to do before I'm sure it's the right solution for me (I'll do them this night or the next one) but it looks very good for now and is sure interesting (I was looking into flex box but didn't know until now whether it could help). – Denys Séguret Feb 04 '14 at 13:32
Can you explain why you have to do a `.u:before` ? It's not possible to have the .u both cover the whole space and being centered ? – Denys Séguret Feb 04 '14 at 13:38
flexbox's `align-items: center;` causes each child (flex item) to vertically align middle - but this means that the item's height becomes the height of it's content. That's why I used `u:before`. That being said...there might still be a better way (I'll try to look into this). – Danield Feb 05 '14 at 07:32
I tried and didn't find anything elegant (I finally resized the div with JS on my site as I already have to deal with element heights). – Denys Séguret Feb 05 '14 at 07:36

score 1 · Answer 2 · answered Feb 04 '14 at 10:55

1

The problem is that table-cell, table-row and similar table-display values cannot have any positioning applied to. Just as if you are creating a table and giving positions to the td and tr.

An ugly fix is to wrap it in a div whose display is set to block like this

Reference: position - CSS | MDN

answered Feb 04 '14 at 10:55

Ahmad Alfy

11,903
6
59
94

*"The problem is that table-cell, table-row and similar table-display values cannot have any positioning applied to"*. The same thing work if I put the triangle in a table-cell element. – Denys Séguret Feb 04 '14 at 11:03
@dystroy did you test it on Firefox? It wont work on Firefox as far as I remember – Ahmad Alfy Feb 04 '14 at 11:13
I am a little confused, can you sketch what are you trying to achieve? I think I am not getting the picture. – Ahmad Alfy Feb 04 '14 at 11:18
[If you log in, you can see it in action there](http://dystroy.org/miaou/1?Miaou). I want exactly that (I'm in the process of changing the current working layout to use a `table-row` for each message). – Denys Séguret Feb 04 '14 at 11:22
But this way, only the arrow is the clickable part. – Ahmad Alfy Feb 04 '14 at 11:29
And it's not centered. – Denys Séguret Feb 04 '14 at 11:31
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/46740/discussion-between-ahmad-alfy-and-dystroy) – Ahmad Alfy Feb 04 '14 at 11:32
In fact there's a problem with your solution : the second cell doesn't expand to take the whole row (this may help : http://jsbin.com/awATeGAG/5/edit). I can make it better with `width: calc(100% - 120px);` but it's growing more and more complicate... – Denys Séguret Feb 04 '14 at 12:31
1

I adapted and tested extensively the flexbox solution of danield. It works, I thought you might be interested to know that (to make a complete real solution you have to play with `flex-basis` and `flex-grow`, though). – Denys Séguret Feb 04 '14 at 18:24
@dystroy Thanks for the update, will definitely check that. I didn't really dive deeper into flexbox solution. Glad it worked for you :) – Ahmad Alfy Feb 05 '14 at 06:53

Position an element over a table-row element

2 Answers2

CSS