divs and spans and the like

[Rat]

I'm (once again) trying to create something in html that would normally be done in tables. Because I hate myself and enjoy torturing myself over several hours, I am not doing it in tables. What I need to do is array several smallish (100 pixels, more or less) pictures on a page, each with two very short lines of text underneath. In an ideal world, the images (and their associated text) would wrap, like text, according to the width of the page, but I'd be happy if I could just arrange, say, 8 boxes per row.

Obviously, divs are block level, but nonetheless they seemed the obvious way forward. Mucking about with float and clear don't seem to achieve what I need. Changing the display of the divs to table-cell almost does what I want, but doesn't work in IE the same way as FF. Using spans instead of divs would seem more likely to work, but, as they are inline, has implications I'd rather avoid. Any ideas? I am, by the way, trying to stick to XHTML 1.0 strict, for the reasons I outlined in the second sentence.

Cheers,
Rat.

[Rat]

OK, forget using "display: table-cell;". It was retarded, and isn't generally supported, even if it were a good idea in this case.

[John Hewitt]

I'm (once again) trying to create something in html that would normally be done in tables. Because I hate myself and enjoy torturing myself over several hours, I am not doing it in tables. What I need to do is array several smallish (100 pixels, more or less) pictures on a page, each with two very short lines of text underneath. In an ideal world, the images (and their associated text) would wrap, like text, according to the width of the page, but I'd be happy if I could just arrange, say, 8 boxes per row.

Obviously, divs are block level, but nonetheless they seemed the obvious way forward. Mucking about with float and clear don't seem to achieve what I need. Changing the display of the divs to table-cell almost does what I want, but doesn't work in IE the same way as FF. Using spans instead of divs would seem more likely to work, but, as they are inline, has implications I'd rather avoid. Any ideas? I am, by the way, trying to stick to XHTML 1.0 strict, for the reasons I outlined in the second sentence.

Cheers,
Rat.

Can you not just put a bunch of little divs inside a big div? You might be able to size the little ones as percentages.

[Rat]

Can you not just put a bunch of little divs inside a big div? You might be able to size the little ones as percentages.
Well, yes, but I'm still left with the problem that the little ones are block-level by default, and thus will not sit next to each other happily. I can change them to inline, but then I may as well have used spans instead, and it still doesn't work well between browsers anyway, though I'm only concerned with IE6/7 and FF1.5.

Incidentally, I have a suspicion that this is a really stupid question, either because it's obvious or (more likely) because it's unanswerable, but is "body" block level or inline? What I mean is can body be treated like an all-encompassing div?

[John Hewitt]

Well, yes, but I'm still left with the problem that the little ones are block-level by default, and thus will not sit next to each other happily. I can change them to inline, but then I may as well have used spans instead, and it still doesn't work well between browsers anyway, though I'm only concerned with IE6/7 and FF1.5.

Incidentally, I have a suspicion that this is a really stupid question, either because it's obvious or (more likely) because it's unanswerable, but is "body" block level or inline? What I mean is can body be treated like an all-encompassing div?
"body" was there before layers of any kind were being considered. It would be a body tag if anything but I would not think of it in those terms.
Insofar as I understand your query, your problem seems such that your little divs should be divs because you will have both image and text within them but your style sheet can set them to run inline.
Nonetheless, you still end up with differences between browsers. I found the differences to be due mainly to the different ways browsers draw margins and borders. IE draws an internal margin and FF draws external margins. (Which is what www consortium agreed it should do.) Hence the little divs have slightly different sizes in the different browsers.
At the end of the day, the important thing is not that the page should appear identical in both browsers but that the two representations should both be aesthetically pleasing.

[logical muse]

Something like this:
http://www.frettunes.com/ ?

It's a little site I made. Please feel free to look at the code and take what you need, if it works for you.

[Rat]

Something like this:
http://www.frettunes.com/ ?

It's a little site I made. Please feel free to look at the code and take what you need, if it works for you.
You're evidently doing the same sort of thing as I'm trying to, so it looks kind of similar. But I would like, ideally, for the number of image-and-text-holding divs to vary depending on the width of the browser window; sort of like how word wrap works in Notepad (or whatever) but with divs rather than words.

Incidentally, what have I missed regarding the text you have in each div? You seem to have each line of text opening with <h4> and closing with </h5> or similar. Is there a reason for this that I'm not aware of?

[sophia8]

Take a look at some of Stu Nicholl's CSS-only gallery demos here (http://www.cssplay.co.uk/menu/index.html). You'll probably find something suitable there.

[logical muse]

You're evidently doing the same sort of thing as I'm trying to, so it looks kind of similar. But I would like, ideally, for the number of image-and-text-holding divs to vary depending on the width of the browser window; sort of like how word wrap works in Notepad (or whatever) but with divs rather than words.

You'll notice that each item is "float: left;", so that if there are more than will fit on a line, they'll wrap over on to the next line. You don't get to see this effect on my site because it's fixed width, but it will work if you use a fluid container.

Incidentally, what have I missed regarding the text you have in each div? You seem to have each line of text opening with <h4> and closing with </h5> or similar. Is there a reason for this that I'm not aware of?

That was weird...

[tkingdoll]

This might be a UK-only insult but...you're a div.

Hur hur!

Sorry, couldn't resist.

Playground taunts aside, I thought tables were passe in contemporary web design?

[logical muse]

This might be a UK-only insult but...you're a div.

Hur hur!

Sorry, couldn't resist.

Playground taunts aside, I thought tables were passe in contemporary web design?

I think you're right, UK-only... :)

And yes, we're discussing table-less design with (X)HTML and CSS.

[tkingdoll]

I think you're right, UK-only... :)

And yes, we're discussing table-less design with (X)HTML and CSS.

I div means a wally. That's probably not much help either :D

I was referring to this bit: I'm (once again) trying to create something in html that would normally be done in tables.

My perception was that not using tables was the norm now, although I do know a couple of web designers who still do. Just wanted to clarify what 'the norm' is because I get clients specifically asking for tables and it would help if I could give them a definitive answer on how common they are any more. I'm tending to say "remember frames? Exactly." but I don't know if that's a fair comparison.

[logical muse]

A few of my old, table-based designs are still on the net. I might get around to redesigning them one day. For the past few years though, I've used tables to represent, well, tables.

I'd say that not using tables *is* pretty much the norm now. You'd have to google it for references, but I think most designers have made the switch.

Why are your clients asking for tables?

[tkingdoll]

A few of my old, table-based designs are still on the net. I might get around to redesigning them one day. For the past few years though, I've used tables to represent, well, tables.

I'd say that not using tables *is* pretty much the norm now. You'd have to google it for references, but I think most designers have made the switch.

Why are your clients asking for tables?

Cause some of them like to throw jargon around without really understanding it. My theory is that they think if they can establish themselves as appearing to be knowledgeable about web design, they won't get ripped off even though they don't know anything about it.

Sometimes it's simply because their last website was done that way, or with small businesses because their wife's nephew dabbles and has told them what to ask for.

All sorts of reasons, really. Thanks for the info :)

[skoob]

There's an old A List Apart article (http://alistapart.com/articles/practicalcss) that describes pretty much exactly what you're looking for. Note that the article uses a "spacer" div (an empty div with clear:both set) in order to get the container div to expand and enclose the floating elements. These days, there's a better way (http://css-discuss.incutio.com/?page=ClearingSpace) to do it.

[skoob]

is "body" block level or inline? What I mean is can body be treated like an all-encompassing div?I would say neither. AFAIK, block level vs. inline mostly affects how an element is layed out and how it is treated in the "flow" of a document. I don't think it make much sense to consider body to be block level or otherwise, since there aren't any surrounding (and displayed) elements that could be affected.

Inline elements normally can't contain block-level elements, so body is more similar to block-level than inline. Kind of like a super-block-level. The specification (http://www.w3.org/TR/html401/sgml/dtd.html#block) doesn't define body as either.

[Rat]

My perception was that not using tables was the norm now, although I do know a couple of web designers who still do. Just wanted to clarify what 'the norm' is because I get clients specifically asking for tables and it would help if I could give them a definitive answer on how common they are any more. I'm tending to say "remember frames? Exactly." but I don't know if that's a fair comparison.
Personally, I have always tried not to use tables (other than for tabulating data), but even now I wouldn't say that that's the norm. In my experience the vast majority of web sites use tables for layout. Try looking at the source of this page, or of the JREF home page.

I know, and fully agree with, all of the arguments against table layouts, but a large number of people are too familiar with it to change, and it just is the easiest way to set up a lot of layouts, even if it then becomes a nightmare to upkeep.

[Rat]

There's an old A List Apart article (http://alistapart.com/articles/practicalcss) that describes pretty much exactly what you're looking for. Note that the article uses a "spacer" div (an empty div with clear:both set) in order to get the container div to expand and enclose the floating elements. These days, there's a better way (http://css-discuss.incutio.com/?page=ClearingSpace) to do it.
Those were brilliant links, thanks. I'm going to have to spend some time reading through them, but they look perfect.

[logical muse]

Personally, I have always tried not to use tables (other than for tabulating data), but even now I wouldn't say that that's the norm. In my experience the vast majority of web sites use tables for layout. Try looking at the source of this page, or of the JREF home page.

I know, and fully agree with, all of the arguments against table layouts, but a large number of people are too familiar with it to change, and it just is the easiest way to set up a lot of layouts, even if it then becomes a nightmare to upkeep.

A few high profile sites that don't use tables for layout are:

digg.com (http://www.digg.com/)
slashdot.org (http://slashdot.org/)
wired.com (http://www.wired.com/)
netscape.com (http://www.netscape.com/)
microsoft.com (http://www.microsoft.com/)
yahoo.com (http://www.yahoo.com/)

This site has one table as a container, with only one row and one cell, but the photo thumbnails are just divs (and they wrap):
istockphoto.com (http://www.istockphoto.com/file_browse.php)

Most sites that have been around for a while would still use tables for layout unless they've been redesigned. Nearly all the sites I've mentioned above used table layouts at one time.

[Wudang]

Those were brilliant links, thanks. I'm going to have to spend some time reading through them, but they look perfect.

If a List Apart if news to you, then presumably so is the wonderfully named www.noodleincident.com. One of Eric Meyers CSS websites.