CSS and div is a half-baked system of page layout. You have very little control over it. The only way I can think of to do this is nesting some divs, each with different properties and widths.

This is a place where tables are better. The table is not deprecated. They just don't want us to use them to create padding, borders, and margins.

My rule:

1. If you want something fluid, which changes its arrangement when you resize the browser or change screen resolution, use div.

2. If you want a stable structure which keeps its shape, use table.

div gives great control over layout, fixed or otherwise, only people who don't really spend the time to learn to use it right promote the use of tables for layout...

I am not sure that the above suggestion to inline the div tags will work as expected, some browsers, newer IE versions to be specific will ONLY allow inline to be applied to elements which are naturally inline elements...I know, that seems stupidly redundant.... But it is for people who may have switched an inline element to block in a page level CSS, but then wish to return that to inline in an element level CSS...

They obviously were smokin' somethin' when they made that decision....

But we live with it...

I have recently made a page that uses images for buttons. The buttons are centered in the area, and inline next to each other... honestly it was quite tricky getting it to work... I don't like the way I finally got it, I thought of better ways later, but never made the change to that menu...

You can use javascript to dynamically position your divs...

decide how many images you want across the page, or how much space to allot to each image...either way...

use document.body.clientHeight and document.body.clientWidth to find the "ACTUAL" space available in the browser window... then position the images via math... you can use JS to get an enumeration of all div tags and set each one in a loop, or use classes, id, name etc. to sort it out...

use "position: absolute;" then set top and left using the calculated values from CSS.. .

With a little effort and creativity you can place each image exactly where you want it...

put all this in a JS function which is called by onLoad in the body tag... if you use css classes for layout control you could do the calculations earlier... make the images hidden, so they don't show until the positioning is finished, so the page loading looks better...

use onResize in the body tag to recalculate the positions if the user resizes the window after loading... some older browsers won't redraw the page once it is rendered fully, but I don't know anyone who still has an browser that old...so don't worry about it...

I have this working in a slightly different example and it is tested on Opera, Firefox and IE and yields 100% the same results in all 3...

Contact me directly if you want some direct guidance on this... I have a PDF aritcle I wrote detailing the methods to use...

Thanks RG,

Yes, it seems counter intuitive to assign inline attributes to a block item.

What I'm trying to achieve is divs in rows where the width of the container and the number of divs in a row are unknown.

I have a fluid width page design, and floating the blocks left made them line up in rows, but when the width was more than 3, but less than 4 in a row the divs all floated left, and there was too much air to the right.

The technique described by Rhyan brought them to the center of the page though without captions -- success! (of a sort)

I've almost got the page completed and will post the results here when I do.

I don't understand why you don't have captions... the div that contains the image should set text-align: center then after the image, if you want the caption below, place <br/><span>your Caption</span> with any text formatting your captions needs in the span tag... That should end up like this

<div style="text-align: center;">
<img src="xxx.jpg" alt="xxx"/><br/>
<span style="font-weight: 600;">XXX in Red</span>
</div>

or something like that... it should keep the relevant text WITH the image, centered under the image...
move the <span> tags and the <br/> tag to before the <img> tag if you want the caption above the image... <div><span></span><br/><img/></div>
by embeding <div> tags as Rhyan suggested this should be relatively easy, BUT as I mentioned, some browsers will have trouble with inlining block elements... and you will end up with 1 image per row... so test thoroughly...

good luck

The problem is that, if the browser window isn't wide enough to hold all of the divs, the format will fall apart. Different browsers make it fall apart in different ways here.

IE stacks the images on top of each other vertically in a single-file column.

Firefox overlaps the images, hiding parts of them behind other images.

Netscape puts a horizontal scroll bar on the screen.

With tables, all three browsers add the scroll bar when the format doesn't fit.

The real problem is that the W3C deprecators are thinking of the newspaper format, and don't expect anyone to be publishing anything other than a newspaper. So they took out everything that isn't compatible with newspaper format.

I have a div system like these that embeds multiple divs inside a parent div... infact I have entire sites that are built using multiple levels of embeded div tags... these all display just the same on IE & FF & Opera.. has anyone got a simple abreviation for Opera... Anyway, to get things working just right for your particular uses you must play with it a bit...

I don't know about the newspaper comment, since the use of columned layouts in CSS is a problem many people are having, in fact it is the main reason people turn to tables... and Image wrapping of text is common in newspapers too...

I think the real probably is that the standards are not enforcable in anyway... MS can continue to invest more time and effort in breaking the standard than they do in compliance... Also, remember that MS, among others, is on the standards board... they KNOW what it is supposed to do, it isn't about differences in interpretation... like when Bill Clinton said, "I guess it depends on what your definition of the word 'is' is."... They just think that we are stupid enough to not understand... Since the general public don't deal with the problems caused by MS, they continue to use the browser despite that crap... MS counts on this to bully the owrld into doing things "their" way...

Newspaper layout is what makes people designing for the web a problem... the people in Japan, where I live, want to pack as much on the screen as they can... like a newspaper where each page costs money... and they want to control the layout with pixel perfect clarity... BUT this doesn't work since each monitor will have its own resolution, each platform has a standard resolution and each desktop size setting has a resolution... the cobination of these factors means that few computers will have the same resolution, even if they were all set to 800x600 it wouldn't be the same... So graphic designers who design for print media can not use the same skills to design for the web.... but they are trying...

They also charge per page so the customers go along with reduction of pages by packing content... But only 7% of the page typically is perceived by the reader... The less you put, the more that is perceived... the more you put the less that is perceived... Google is a perfect page, and Yahoo sucks.... from a layout point of view...

Put the blame where it belongs, on the web designers and MS... not on the people who are trying their best to make us all "just get along"... ;-)

Peace,