By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,330 Members | 1,065 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,330 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Share this Question
Share on Google+
1 Reply

P: n/a
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.