display: table-row and friends

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Jenk
DevNet Master
Posts: 3587
Joined: Mon Sep 19, 2005 6:24 am
Location: London

display: table-row and friends

Post 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.)
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Why not just use a series of left floated elements? Do they all need to resize horizontally?
User avatar
Jenk
DevNet Master
Posts: 3587
Joined: Mon Sep 19, 2005 6:24 am
Location: London

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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..
User avatar
Jenk
DevNet Master
Posts: 3587
Joined: Mon Sep 19, 2005 6:24 am
Location: London

Post by Jenk »

It messes up the content below that of the floats, as it jumps up underneath the floats :)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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)
User avatar
Jenk
DevNet Master
Posts: 3587
Joined: Mon Sep 19, 2005 6:24 am
Location: London

Post by Jenk »

Cool, will give it a shot (and post more code) when I am back in the office on the morrow, thanks :)
Post Reply