CODEWITHSUNDEEP
htmlcss
Marco Aurélio Deleu
Marco Aurélio Deleu

Reputation: 4367

How to position a div at the bottom of a table cell?

I'm tired of searching and not being able to accomplish this: 1 label at top left of a cell and the content at the bottom center. Trying to achieve this, I'm using 2 divs inside a TD, but I don't mind changing that as long as I can achieve the goal.

  1. I don't know the size of the labels (they can be translated into different languages and therefore taking different sizes).
  2. The original table will be taking half of an A4 Portrait in height. It's 7 (row) * 5 (columns) (with the exception of 1 single cell in the middle of it that I use rowspan="2")
  3. I've tried the "set the parent to position: relative and make the container position: absolute; bottom: 0" solution and I can't make it work.
  4. Basically, I want to have 1 label set to the top left and the content in the bottom middle of the cell.
  5. The 950px width is for printing purposes.

Here is a jsfiddle link to exemplify my problem. http://jsfiddle.net/o1L31qwu/

Thanks in advance.

Upvotes: 1

Views: 1655

Answers (2)

DRD
DRD

Reputation: 5813

Here's a flexbox solution that will handle arbitrarily-sized .label and .content: http://jsfiddle.net/5kzzgkgr/.

The content of the cell should be placed in a wrapper div:

<td>
     <div>
         <div class="label">This Label is large / and divided [eph] really large label.And some more text, text, text, and more text.....<br /><br /></div>
         <div  class="content">BOTTOM</div>
     </div>
</td>

CSS:

.tableClass td{
    height: 0px;
}

.tableClass div:only-of-type {
    height: 100%;
    background-color: #ccc;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
}

Upvotes: 2

Devin
Devin

Reputation: 7720

change your CSS like this:

.tableClass {
    width: 950px;
    table-layout: auto;
    margin-top: 8px;
    border-color: black;
    border-width: 0 0 1px 1px;
    border-style: solid;
    border-spacing: 0;
    border-collapse: collapse;    
}

.tableClass td{
    border-color: black;
    border-width: 1px 1px 0 0;
    border-style: solid;
    margin: 0;
    padding: 4px 0;
    position:relative;
    vertical-align:top;
}
.label{position:relative; margin:4px; margin-bottom:30px /* adjust to bottom size */; }
.content{width:100%; position:absolute; bottom:1px; left:0; background:#fc0; margin:0; text-align:center;}

I have added a background color for visualization purposes, but of course you'll need to edit at will . See fiddle here

Upvotes: 3

Related Questions