469,954 Members | 1,759 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,954 developers. It's quick & easy.

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

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.
Jul 20 '05 #1
1 3715
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

Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

7 posts views Thread by Eduard Dewolf | last post: by
4 posts views Thread by gomesbascoy | last post: by
2 posts views Thread by benjaminmartin | last post: by
14 posts views Thread by greentiger1 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.