I'm new to CSS and making a slideshow that centers a picture on the page, and shows a text caption box a few pixels to the left of the picture. The problem is I can't fix the size of the picture div since the pictures are all different widths. Is there some obvious fix for this? Here's my code, which doesn't work, but I'm including it to get the gist across. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- body,td,th { color: #CCCCCC; } body { background-color: #000000; text-align: center; text-align: center; } #container { margin-left: auto; margin-right: auto; background-color:#CCCCCC; } #pic { background-color:#FFFF00; } #blurb { left: 100px; font-size: 16px; font-weight: bold; color: #FF0000; } --> </style> </head> <body> <div id = "container"> <div id = "pic"> <img src="http://www.blueflash.cc/blog/media/mg_5560.sized.jpg"> <div id = "blurb">hi there!</div> </div> <!-- end pic --> </div> <!-- end container --> </body> </html> Code (markup):
I'd take the part where the image will sit and have a div. The div would contain the Flash/whatever image AND the blurb (blurb would not be in a div). If the image is always floated to the right inside this div box, then the blurb (which still comes later in the source) should ride alongside the image so long as blurb remains an inline element (or an box that can only contain inlines like<p>). Put the class of "blurb" on the <p> for styling reasons. It should try to hug the floated image an if longer than the image is tall, then it would wrap underneath as well. Normally floats must be given a width-- since your are all different widths, you'll have to rely on the browser seeing what the width is as it loads. This can sometimes cause trouble with IE as it might try to render the rest of the page before it knows the size of the image. If they're all the same height, you can set this in the HTML (better than setting it in the CSS). If these are Flash images, then they'll be sitting in an <object> tag and you would then set the height in the CSS. It's only images where sometimes IE tries rendering the page before it knows the size of the image (it knows the size after it's loaded it entirely, which is why normally image sizes are set in the HTML as <img src="blah" height="blah" width="blah" alt="blah"> without the units (pixels are assumed)). So, you'd have this: </head> <body> <div id = "container"> <div id = "pic"> <img src="http://www.blueflash.cc/blog/media/mg_5560.sized.jpg" height="somenumber" alt="describe the image here"> <p class ="blurb">hi there!</p> </div> <!-- end pic --> </div> <!-- end container --> </body> </html> Code (markup): CSS: #pic { background-color:#FFFF00; margin: 10px auto; <--centers it in #container overflow: hidden; <-- to make sure whatever colour background you have is at least longer than the float width: somewhat bigger than the largest image to make room for p; } #pic img { float: right; } p.blurb { font-size: 16px; font-weight: bold; color: #FF0000; } Code (markup): You need to look at the size of your largest image and set the width of #pic larger-- larger enough that the text can ride alongside. You'll also need to clear that float somewhere after #pic ends. So usually that's whatever element comes directly after #pic. You'd set clear: right; in that element's CSS.