Question

I’m trying to create a ‘workflow’ bar on a web page.

The items in the workflow might be of different lengths.

There might be enough items to fill the width of the screen, hence the flow needs to wrap onto the next line.

I’m using left floating divs to do this.

However, I’d like the divs to take an appropriate amount of screen width.

If only three items can fit on one line, then I’d like those items to fit evenly on the line, taking into account each individual items width.

All I can get at the moment is for the final div on a line to fill up the remaining space, which often means my items are all left aligned, e.g. I can get a layout like this:

 AAAA -> BBBBB -> CCCCCCCCCCCCCCCCCCC -> DD -> EEE -> FFFFF -> GGGG -> HHHHH 

but I actually want it to look something like this:

       AAAA   ->   BBBBB  -> CCCCCCCCCCCCCCCCCCC  -> DD -> EEE ->    FFFFF ->  GGGG ->  HHHHH 

if you see what I mean.

Do I need to use tables for this rather than floating divs?

Answer 1

just a couple of other pointers. You should not have empty li tags, that is not semantically correct. Also in an ideal world you should not give id attributes layout names.

Personally I’d place the starting image on the ul and then place the closing image on the last li.