Hi everyone, I'm trying to create a simple float, where the text floats to the right of an image. All I have is an image and a paragraph inside of a div but when I float the image and para, the containing div collapses. The following is the xhtml and css: <!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" /> <title>Special Offer</title> <link href="css/offers.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="augustOffer"><p><img src="images/Test.jpg" alt="Image of Test" />text goes here. text goes here. text goes here. text goes here. text goes here. text goes here. text goes here. text goes here. text goes here. text goes here. text goes here. text goes here. text goes here. .</p> </div> </body> </html> Code (markup): body { font: 12px/16px Verdana, Arial, Helvetica, sans-serif; color: #634A95; background-color:#fff; text-align: left; padding: 0; margin: 20px; } div#augustOffer { width: 300px; padding: 20px; background-color: #fff; border: 10px solid #634A95; } div#augustOffer img { float: left; } div#augustOffer p { float: right; width: 300px; display: inline; } Code (markup): Can anyone tell me why this is happening? Thanks for any help offered.
Why are you floating the <p> right, and why are you setting it to display inline? If you're floating multiple paragraphs with a left or right margin I understand why, but if all you want to do is clear the contained floats you need to set overflow (auto or hidden depending on what you need). I'm still not quite sure what kind of alignment you're going after, but if you don't want the text to wrap around the image (you simply want the text to be to the right of the image) try setting it as the background image (top left) with a large enough left-padding to keep the text off it.
I didn't want to go this way because I need the image to be a clickable link. The page is just a small pop up window - literally just the code I posted originally. At the moment the image is on the left and the text wraps to the right of it, but the containing div doesn't wrap around the two elements - it collapses. I don't know why I'm displaying the <p> inline - I thought it might help wrap the div around this <p> and the image. I tried adding overflow hidden to the <p> element but it hasn't solved the problem. Do you have any further suggestions?
There's an old saying... "A family that floats together stays together". Translated, it means when you have floated content it needs to be placed inside a floated parent container. Just float your parent container and go from there. Use clearing divs when needed. If you have a centered layout you might need to use a different method for centering floated containers.
Not always a good idea. When you float the containing element in an effort to enclose its float children, you're just shuffling the real issue off to another level. That may or may not be desirable. There are several ways to enclose or contain your float elements. None will work as you'd like for every case, but for any case, at least one will. cheers, gary