CODEWITHSUNDEEP
htmlcssvertical-alignmenttablecell
Lucas Bustamante
Lucas Bustamante

Reputation: 17168

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

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>

Upvotes: 1

Views: 3178

Answers (3)

henser
henser

Reputation: 3327

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?

Upvotes: 1

DJ Burb
DJ Burb

Reputation: 2364

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>

Upvotes: 1

vas_bar_code
vas_bar_code

Reputation: 213

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;
}

Upvotes: 0

Related Questions