CSS floats and clears within content

[derefed]

I'm trying to design a website that'll have a lot of image galleries,
and I've run into a problem.

For the past month or so I've been trying to find a way to display a
bunch of thumbnails on a page with variable width captions side-by-side.
However, as I couldn't get them to work as intended (when the browser is
shrunk the floats crowd together improperly), I decided to find another
approach.

I thought of making the captions run off to the right of the thumbnails,
and so I now have a container to hold the image and the caption, and
to make the text run to the right, I have the image floated to the left.
And of course, to place the next image underneath the last, I have the
containers set to clear: both.

However, I discovered something wrong with this setup: the containers,
which are inside a body/content container, are also clearing the navbar,
which is floated left and outside of the body/content container.

So basically my question is this: how can you set up _anything_ that
needs to clear floats within a content section without also clearing
things such as navbars that are floating off to the side? Knowing how
CSS works, I would think that there is no way to do that ... so my
question is more from the standpoint of "how are you supposed to get the
kind of layout you want?".

Some of this explanation might be a little cryptic... I'll elaborate
more if needed.

Thanks in advance,
derefed

 

[Leif K-Brooks]

For the past month or so I've been trying to find a way to display a
bunch of thumbnails on a page with variable width captions side-by-side.

[...]

So basically my question is this: how can you set up _anything_ that
needs to clear floats within a content section without also clearing
things such as navbars that are floating off to the side?

The real problem here is the lack of support for display:inline-block in
today's browsers, which forces us to hackishly use floats for thumbnails
and the like. If browsers besides Opera supported inline-block, we
wouldn't even need to use a special element to clear the floating
thumbnails: any ordinary block-level element would automatically be on a
separate line from the thumbnails without doing anything special.

Unfortunately, with browsers being what they are, you have a few
not-so-pleasant options: you can float the nav bar on the opposite side
from the thumbnails (either float the thumbnails to the left and nav bar
to the right or vice-versa); you can use something besides a float for
the nav bar like absolute positioning, CSS tables, or HTML tables; or
you can use inline-block for the thumbnails but haver your page only be
pretty in Opera. Personally, I would float the thumbnails to the right
instead of the left so that you can use clear:right afterwards and not
hurt the nav bar, but the third solution is really the most elegant.

 

[Spartanicus]

If browsers besides Opera supported inline-block

Safari and iCab do, IE5+ also supports it on elements that default to
inline:
http://www.spartanicus.utvinternet.ie/centered_image_gallery_with_captions.htm

 

[Lauri Raittila]

Safari and iCab do, IE5+ also supports it on elements that default to
inline:
http://www.spartanicus.utvinternet.ie/centered_image_gallery_with_captions.htm

IE supports inline-block, if you say display:inline;display:inline-block;