CSS: <div>s with borders don't surround sub-<div>s?

[Alan Hoyle]

I was using a <table border> to generate borders around some
info/images, and decided to follow the w3c guidelines and convert it
to CSS boxes with borders since it wasn't really tabular data.

It used to be something like this:

<table>
<tr>
<td><img>caption</td>
<td><img>caption</td>
</tr>
<tr>
<td><img>caption</td>
<td><img>caption</td>
</tr>
</table>

Basically, I want to change it to be "border-style:outset" for the
<table> tags, and "border-style:inset" for the <td> tags, and have
them flow around each other. The only way it seems that I can get the
boxes to surrond both the text and the images with at <div> tag, but
then it inserts a line break after each one. If I use "float:left" it
doesn't line break, but if I float all of the <div>'s, the resulting
"outset" box is zero pixels tall. If I float all but the last <div>
image, it gives me a really weird effect where the last box is too
tall. (i.e. the height of the whole box, not just of the image....

Any suggestions?

Here's the original:

http://nelson.oit.unc.edu/~alanh/mypics.html

Here is one attempt at just doing the top table:

http://nelson.oit.unc.edu/~alanh/mypics.css.html

As you can see, it doesn't really work. I've tried this with multiple
browsers....

For another example, view the following site with a Mozilla
derivitive:

http://nelson.oit.unc.edu/~alanh/

-alan

--
Alan Hoyle - al***@unc.edu - http://www.alanhoyle.com/
"I don't want the world, I just want your half." -TMBG
Get Horizontal, Play Ultimate.

[Jim Dabell]

Alan Hoyle wrote:

[snip]

Basically, I want to change it to be "border-style:outset" for the
<table> tags, and "border-style:inset" for the <td> tags, and have
them flow around each other. The only way it seems that I can get the
boxes to surrond both the text and the images with at <div> tag, but
then it inserts a line break after each one. If I use "float:left" it
doesn't line break, but if I float all of the <div>'s, the resulting
"outset" box is zero pixels tall.

[snip]

It sounds like you might want to use one of the list element types, not a
set of <div> elements. In any case, you can get around the problem of
floating elements not affecting the height of the parent quite easily. Put
an element after all the floating elements that is invisible, yet uses the
clear property to be placed after the floating elements. This element will
then affect the height of the parent element.
--
Jim Dabell