How to make on div on top of another with table-cell?

Question

I'm trying to make two divs to be one on top of another, like this:

the problem

The fiddle:

<!-- CSS -->
.table {
  display:table;
}
.div1 {
  display:table-cell;
  vertical-align:middle;
}
.div2 {
  display:table-cell;
  vertical-align:bottom;
}
<!-- /CSS -->
<div class="table">
  <div class="div1">
    Top
  </div>
  <div class="div2">
    Bottom
  </div>
</div>

score 1 · Accepted Answer · edited May 23 '17 at 11:59

1

Put a wrapper element with display: table-row; in each table-cell element you want to isolate. This will stack the cells in different rows, one on top of the other.

And don't use tables for your layout ... here's why: Why not use tables for layout in HTML?

edited May 23 '17 at 11:59

Community

1
1

answered Oct 23 '14 at 18:06

henser

3,307
2
36
47

Thank you, table-row was the answer! I feel stupid for forgetting about this lol. I'll take a look at the link you recommended, thanks again. – Lucas Bustamante Oct 23 '14 at 18:16
You should not use tables if you are just dealing with basic elements. Try to only use tables for charts/boxes if needed. – CodeGodie Oct 23 '14 at 18:21

score 1 · Answer 2 · edited Oct 23 '14 at 18:22

1

when I did the fiddle.... I came up with this (no css)

<div>
    <div align='center'>
        <div>
            Socrates (this should be on top of his head)
        </div>
        <div>
            <img src="http://www.mrdowling.com/images/701socrates.png"/>
        </div>
    </div>
</div>

edited Oct 23 '14 at 18:22

CodeGodie

12,116
6
37
66

answered Oct 23 '14 at 18:11

DJ Burb

2,346
2
29
38

This seems to be the right answer. Tables are not the way to go nowadays. – CodeGodie Oct 23 '14 at 18:21
Thanks for the try, I knew I could do it this way, but in my specific case it doesn't work because I need the div to be aligned vertically as well, not just horizontally. It was my mistake, when I created the Fiddle I did not specify this. – Lucas Bustamante Oct 23 '14 at 19:51

score 0 · Answer 3 · answered Oct 23 '14 at 18:08

0

Try this:

Html:

<div class="table">
    <div class="align-middle">
        Socrates (this should be on top of his head)    
        <img src="http://www.mrdowling.com/images/701socrates.png"/>
    </div>
</div>

CSS:

.table {
    display:table;
}
.align-middle {
    display:table-cell;
    vertical-align:left;
}

answered Oct 23 '14 at 18:08

vas_bar_code

213
1
19

Thanks for the try, but I need the image to be aligned to the bottom of the div class table. – Lucas Bustamante Oct 23 '14 at 19:51

How to make on div on top of another with table-cell?

The fiddle:

3 Answers3