Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to position some elements on top of table-cell and some in the bottom?

Tags:

html

css

I need to position an element in the top corner of table-cell and text should stack in the bottom. I used vertical-align: bottom to move all the text down, but now I have a problem with the top element, since table-cell doesn't support relative positioning... any ideas how can this be done?

<div style = "display: table-cell; vertical-align: bottom">
    <div class = "top"> Top corner</div>
    <h2> some text in the bottom </h2>
    <h3> some more text in the bottom </h3>
</div>

edit: It should look something like this

+-----------+   +-----------+  +------------+
|top text   |   |top text   |  |top text    |
|           |   |           |  |            |
|some long  |   |           |  |            |
|text       |   |           |  |            |
|more long  |   |           |  |            |
|text       |   |           |  |            |
|end of     |   |           |  |some text   |
|text       |   |text       |  |text        |
|<button>   |   |<button>   |  |<button>    |
+-----------+   +-----------+  +------------+

This all is wrapped in a div with display:table. The reason I want to use display:table-cell here is to keep these columns equal height and still flexible to accommodate different length of text in the columns.

like image 478
skyisred Avatar asked Nov 10 '12 06:11

skyisred


2 Answers

http://jsfiddle.net/Hwvd5/

Basically what I did was putting a full-size wrapper div into it which is position: relative. Hope this works cross-browser, only tested in chromium ...

Problem with this approach: you won't be able to let the browser automatically choose a height for the columns that matches the content without having them overlap. :( I could think of no way to fix this.

Files from JSFiddle

<br /> <br />

<div class="table">
    <div>
        First cell  <br />    
        First cell  <br />    
        First cell  <br />    
        First cell  <br />    
        First cell  <br />    
        First cell  <br />    
        First cell  <br />    
        First cell  <br />    
    </div>
    <div>
        <div class="wrapper">
          <div class = "top"></div>
          <h2> some text in the top </h2>
          <h3> some more text in the bottom </h3>
        </div>
    </div>
</div>

CSS:

.top {
    position: absolute;        
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: red;
}

h3 {
    position: absolute;
    bottom: 0;    
}

.table {
    display: table-row;
}

.table > div {
    display: table-cell; 
    vertical-align: bottom; 
    border: 1px solid black; 
    padding: 10px; 
    height: 200px;   
}

.table > div > div.wrapper {
    position: relative; 
    width: 100%; 
    height: 100%;   
}​
​
like image 67
opatut Avatar answered Sep 17 '22 21:09

opatut


Add this to the <td>:

style="vertical-align:top"
like image 31
rvdfox Avatar answered Sep 18 '22 21:09

rvdfox