AdRock
03-20-2007, 10:12 AM
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
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;
}
and finally an example of my div
<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>
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
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;
}
and finally an example of my div
<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>