Page 1 of 1

display: table-row and friends

Posted: Mon Jun 11, 2007 9:15 am
by Jenk
Has anyone got any pointers on an easy to implement method for this type of style on IE?

An example mock-up of the markup:

Code: Select all

<div class="row">
  <div class="cell portrait"><h4>Blah</h4></div>
  <div class="cell biography"><p>More blah</p></div>
</div>
<!-- several "rows" -->
The css:

Code: Select all

div.row {
    display: table-row;
}
div.cell {
    display: table-cell;
    height: 160px;
}
div.portrait {
    background-image: url(someimage.jpg);
}
div.portrait h4 {
    top: 150px;
}
It's not strictly speaking a table, so I was trying to avoid using <table>.. the reason for which is when the page is viewed without style, the information is not in grids, but a neatly titled list of biographies.

Anywho.. IE doesn't support display: table-row and friends, does anyone know an alternative (and I cannot use absolute positioning - the content will be dynamic.)

Posted: Mon Jun 11, 2007 9:30 am
by superdezign
Why not just use a series of left floated elements? Do they all need to resize horizontally?

Posted: Mon Jun 11, 2007 9:41 am
by Jenk
They need to be side by side, in pairs for each row. I can't use display: inline for the "row" div's, as the background image is lost.

unfortunately float: left screws the rest of the page, as everything is position: relative and so the float's jump out and align for the window, not the containing div.

Posted: Mon Jun 11, 2007 10:51 am
by matthijs
Can I see the rest of the code? I can hardly imagine a few floats would mess up the rest.

Code: Select all

.row { float:left;width:100%; }
.row .portrait { float:left;width:30%; }
.row . biography { float:right; width:65%; }
will fit in almost everywhere..

Posted: Mon Jun 11, 2007 12:11 pm
by Jenk
It messes up the content below that of the floats, as it jumps up underneath the floats :)

Posted: Mon Jun 11, 2007 2:07 pm
by matthijs
Have you tried it? It does not in the example I gave.

The behavior you describe happens when the containing div isn't cleared. By floating it, it will wrap nicely around the floated child elements. Everything below will stay below. There are other ways to let it wrap around the child floats (overflow:auto I think)

Posted: Mon Jun 11, 2007 2:22 pm
by Jenk
Cool, will give it a shot (and post more code) when I am back in the office on the morrow, thanks :)