CODEWITHSUNDEEP
htmlcss
suspectus
suspectus

Reputation: 17268

column-izing data with HTML/CSS

I'm trying to create a general solution using CSS to layout objects (buttons, text etc) in a tabular column format. What I'm having problems with is controlling the layout. CSS columns would be an answer but alas are not supported by IE9 and earlier.

How can I layout columns horizontally across the screen aligned with vertical-bottom? - with the inner-most div defining the width of the column, and it's parent div defining the spacing between each column.

Any advice or suggestions on this approach would be most welcome.

Layout

<--------------------> col3
<--------------------> col3
col1 <---------------> col3
col1 <--->  col2 <---> col3
col1 <--->  col2 <---> col3

CSS

.column { float:left; height:100px; display:table; }
.col {
    vertical-align:bottom;
    display:table-cell;
    margin-right:15px;  /* this does not work */
}
.coldata { width:20px } /* no spacing - element occupies total width of object */

HTML

<div class="column">
<div class="col">
    <div class="coldata">A1</div>
    <div class="coldata">B1</div>
    <div class="coldata">C1</div>
</div>
<div class="column">  
<div class="col">
   <div class="coldata">A2</div>
   <div class="coldata">B2</div>
</div>
</div>

Note the columns are aligned at the bottom and data is stacked vertically. Here is a fiddle.

Upvotes: 0

Views: 420

Answers (1)

Salomonder
Salomonder

Reputation: 336

I'm using css tables for browsers that agree with the spec: http://jsfiddle.net/eZQGQ/.

The columns in the table model are derived from the presence of the cells. They don't exist: elements with display: table-column aren't drawn (= display:none). Look it up in http://www.w3.org/TR/CSS2/tables.html#columns.

So the class .column is chosen unluckily. : )

You have to use inline blocks for old IE. Here is the hack:

<!--[if lte IE 7]><style>
  .column {
    display: inline;
    zoom: 1;
    margin-right: 15px;
  }
</style><![endif]-->

Upvotes: 3

Related Questions