How to make block elements flow?

[Rennie deGraaf]

I'm working on this page
(http://pages.cpsc.ucalgary.ca/~degraaf/test/test.html). In the central
(green-bordered) area, I want a bunch of (red-bordered) blocks each
containing a thumbnail image and some text. The blocks must be of
fixed, equal size. (Obviously, I'll have to limit the amount of text to
fit this size.) The text must be positioned below the image. Within
the central area, I want these blocks to flow like text; ie, for each
one to be positioned to the right of the previous one until no more
horizontal space is available, and then resuming below at the far left.
I want this layout to adapt to the size of the browser window, so using
absolute positioning is out.

However, if I define these blocks as block elements, I can't get them to
flow. If I define them as inline elements, the captions flow with the
images rather than staying below.

How can I define these blocks to get the layout that I described?

Thanks,
Rennie deGraaf

[Els]

Rennie deGraaf wrote:

I'm working on this page
(http://pages.cpsc.ucalgary.ca/~degraaf/test/test.html). In the central
(green-bordered) area, I want a bunch of (red-bordered) blocks each
containing a thumbnail image and some text. The blocks must be of
fixed, equal size. (Obviously, I'll have to limit the amount of text to
fit this size.) The text must be positioned below the image. Within
the central area, I want these blocks to flow like text; ie, for each
one to be positioned to the right of the previous one until no more
horizontal space is available, and then resuming below at the far left.
I want this layout to adapt to the size of the browser window, so using
absolute positioning is out.

However, if I define these blocks as block elements, I can't get them to
flow. If I define them as inline elements, the captions flow with the
images rather than staying below.

How can I define these blocks to get the layout that I described?

Set "float:left;" for each block.

An example (using 2 celled tables, but it should work for divs as
well):
http://locusmeus.com/test/thumbswithcaptions.html

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Shlomo Artzi - Under Medierranean Skies

[Rennie deGraaf]

Els wrote:

Rennie deGraaf wrote:

I'm working on this page
(http://pages.cpsc.ucalgary.ca/~degraaf/test/test.html). In the central
(green-bordered) area, I want a bunch of (red-bordered) blocks each
containing a thumbnail image and some text. The blocks must be of
fixed, equal size. (Obviously, I'll have to limit the amount of text to
fit this size.) The text must be positioned below the image. Within
the central area, I want these blocks to flow like text; ie, for each
one to be positioned to the right of the previous one until no more
horizontal space is available, and then resuming below at the far left.
I want this layout to adapt to the size of the browser window, so using
absolute positioning is out.

However, if I define these blocks as block elements, I can't get them to
flow. If I define them as inline elements, the captions flow with the
images rather than staying below.

How can I define these blocks to get the layout that I described?

Set "float:left;" for each block.

An example (using 2 celled tables, but it should work for divs as
well):
http://locusmeus.com/test/thumbswithcaptions.html

Thanks, that worked. Now, for my next question.

I have a bunch of image thumbnail DIVs, as described above, flowing like
text inside a fixed-size container DIV
(http://pages.cpsc.ucalgary.ca/~degra...t/index2.html). I would like
each line of these thumbnail DIVs to be centered within the container,
like a center-aligned paragraph of text.

I tried containing the thumbnail DIVs within another DIV with
margin-right=margin-left=auto and text-align=center, but it didn't work
unless I hard-coded the width. Since the width depends on the width of
the browser window, I can't do this in general. I could calculate the
width of the minimum bounding box at view-time with JavaScript, I
suppose, but I'd rather not if there's any better way.

How can I achieve this effect using HTML/CSS?

Rennie deGraaf

[Els]

Rennie deGraaf wrote:

Els wrote:

Rennie deGraaf wrote:

I'm working on this page
(http://pages.cpsc.ucalgary.ca/~degraaf/test/test.html). In the central
(green-bordered) area, I want a bunch of (red-bordered) blocks each
containing a thumbnail image and some text. The blocks must be of
fixed, equal size. (Obviously, I'll have to limit the amount of text to
fit this size.) The text must be positioned below the image. Within
the central area, I want these blocks to flow like text; ie, for each
one to be positioned to the right of the previous one until no more
horizontal space is available, and then resuming below at the far left.
I want this layout to adapt to the size of the browser window, so using
absolute positioning is out.

However, if I define these blocks as block elements, I can't get them to
flow. If I define them as inline elements, the captions flow with the
images rather than staying below.

How can I define these blocks to get the layout that I described?

Set "float:left;" for each block.

An example (using 2 celled tables, but it should work for divs as
well):
http://locusmeus.com/test/thumbswithcaptions.html

Thanks, that worked. Now, for my next question.

I have a bunch of image thumbnail DIVs, as described above, flowing like
text inside a fixed-size container DIV
(http://pages.cpsc.ucalgary.ca/~degra...t/index2.html). I would like
each line of these thumbnail DIVs to be centered within the container,
like a center-aligned paragraph of text.

I tried containing the thumbnail DIVs within another DIV with
margin-right=margin-left=auto and text-align=center, but it didn't work
unless I hard-coded the width. Since the width depends on the width of
the browser window, I can't do this in general. I could calculate the
width of the minimum bounding box at view-time with JavaScript, I
suppose, but I'd rather not if there's any better way.

How can I achieve this effect using HTML/CSS?

<http://locusmeus.com/test/thumbswithcaptionscentered.html>
Widths won't be preserved in Gecko browsers as you can see.
(unless the pics are all of equal width)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -