Geek Answers Handbook

How to place some elements at the top of the table, and some at the bottom?

I need to place an element in the upper corner of the cell table, and the text should be folded at the bottom. I used vertical-align: bottom to move all the text down, but now I have a problem with the top element, since the table-cell does not support relative positioning ... any ideas how to do this?

<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> | +-----------+ +-----------+ +------------+

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

+6
source share
2 answers

http://jsfiddle.net/Hwvd5/

Basically, what I did was put in it a full-sized wrapping div that is equal to position: relative . Hope this works cross-browser, it only checks for chrome ...

The problem with this approach: you cannot let the browser automatically select the height for columns that match the content without matching them. :( I could not figure out how 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%; }​​
+2
source

Add this to <td> :

 style="vertical-align:top"
-1
source

More articles:


All Articles