scotto

Is there a way to define a generic div container so its width is dictated by an image placed inside it?For example:CSS div.mydiv {...} HTML ...<div class="mydiv"> <img src="myimage" /> ...</div>... So, say my image was 340px wide, that would be the width of the div. The idea being, if the div also contained text, that text would wrap, and stay within the bounds of the images width. Maybe handy for displaying images with captions.I want to avoid making custom div's of specific widths.Thanks,Scott

Ok, that's what I figured. Thanks jesh.I'll continue the way I have been, using separate thumbnail images. The extra files don't take up too much space, but they make the page more friendly to those with slower connections.Thanks again,Scott

I want to display thumbnails of photos in a web page, and these will be links to the full sized photos.I can create actual 100px-75px images to display as thumbnails in the links, or I can use the width and height attributes in my img tag, and just have a single image file on the server. For example:first method: <a href="myphoto.jpg"><img src="myphotothumbnail.jpg" /></a>second method: <a href="myphoto.jpg"><img src="myphoto.jpg" width="100" /></a>The former would only download a small fill, say 1 or 2k. But what about the latter approach? Does it download the full image, and then shrink it, or does that happen before the image is downloaded?Scott

Reading some of the other threads, I learned about combining classes. Didn't realize you could do that.Made the following classes of div:CSS codediv.right { float: right; text-align: center;}div.left { float: left; text-align: center;}div.half { width: 50%; text-align: center;}div.w260px { width: 260px;}What I wanted to do was center 2 images on the page, and give each one its own caption. And, I didn't want the captions to stick out beyond the width of the respective images.Below I create a div that is the left half of the page. Then I nest a right floating div. The w260px class sets a width corresponding to my particular image size. This places the first image up against the center line of the page on the left side.Then the same thing on the right side, butting the second image against the center line of the page, on the right side.The "left half" and "right half" parent div's also float, so they effectively split the page in half.HTML code:<div class="left half"> <div class="right w260px"> <img src="foo.png" /> <br /> <b>Figure 1</b>: All foo. </div></div><div class="right half"> <div class="left w260px"> <img src="bar.png" /> <br /> <b>Figure 2</b>: All bar. </div></div>

Using the following code, I can center two adjacent images, and include a single caption.CSSdiv.center { margin: auto; text-align: center;}HTML<div class="center"> <img src="foo.png" /> <img src="bar.png" /> <br /> <b>Figure 1</b>: My caption for foo-bar</div>How can I make separate captions, and limit their extent to stay within the width of their repsective image?In the past is did this via a table with the pictures in one row and the captions in the following row. Additionally, by setting the width of the columns to the width of the pictures, caption text would wrap to stay within its column.ScottO

Ah, that makes sense.Thank you!ScottO

I have the following code in style sheet:table { background-color: #ffffcc;}When I run W3C validation, I get the following warning:Line : 44 (Level : 1) You have no color with your background-color : tableWhat does this warning mean?ScottO