css-tables

HTML and CSS - Vertical align divs

I have a div on the left hand side, and text on the right hand side. The text can be either 2 or 3 lines long, and I want the left hand div to be vertically centered to that text. I've looked online and it seems that all the ways to do this without using tables are complicated. Is there an easy way to do this? Most suggestions seem t...

CSS Equivalent of Table Rowspan with Fluid Height

I'm trying to accomplish the following using CSS: <table border="1" width="300px"> <tr> <td rowspan="2">This row should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.</td> <td>Here is some sample text. And some additional sample text.</td> </tr> <tr> <td>Here is some sample text. And some ad...

css display:table first column too wide

I have a css table setup like this: <div class='table'> <div> <span>name</span> <span>details</span> </div> </div> The css for the table is: .table{ display:table; width:100%; } .table div{ text-align:right; display:table-row; border-collapse: separate; border-spacing: 0px; } .table div span:first-child { text-align:righ...

display:table killing me in IE

I want to create horizontally-aligned table cells like the ones on this page. I've followed the instructions, and I've even copied the css and markup verbatim, but no matter what I do IE 8 renders my table cells as blocks (stacked on top of each other instead of aligned next to each other). css: <style type="text/css"> body.TableStyl...

[Firefox 4 beta 1]: Rendering <div> with [display: table-cell] strangely

Firefox displays the cells [#side, #data, #form] with a huge preceding space at the top of their contents. Whereas, Safari & Opera do not do this. Is it something to do with my CSS, or is it Firefox's fault? HTML code: <body> <div id="banner">St. Tom's Ambulance Ball</div> <!-- START[container] --> <!-- "body" --> <d...

Table won't overflow

I have a table with a variable number of columns that I want to place in a fixed width div. I want the table columns to have a fixed width and the table to overflow horizontally inside the div if it gets too wide. However the table seems to resize itself to fit inside the div. <style> table,td{ border:1px solid black; } </style> ...