I have a class div which is designed to have an a small image floated to the left and some text next to it giving a description of what the image is.
The problem is that the image is overlapping the div whereas the text fits perfectly. I have placed the code for the image source within the <p> tag to conform with XHTML.
I can't set a size for the height becuase I don't know how much text or how big the image is going to be and I need the div to resize if the user increases their text size (i'm trying to make the site accessible)
This is the CSS
and finally an example of my divCode:p { font: 80%/1.8em Verdana, Geneva, Arial, Helvetica, sans serif; padding-top: 0; margin-top: 0; } .contentbox { height:auto; font-size: 80%; clear: left; padding: 2px 4px 2px 6px; margin: 0 0 10px 0; border: 1px dotted #B1B1B1; background-color: #F4F4F4; } .contentbox img { margin-right: 5px; float:left; }
Code:<div class="contentbox"> <p><img src="images/traditional-souvenirs.jpg" alt="Souvenirs" /> Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p></div>



Reply With Quote

Bookmarks