How do I stop my images overlapping their container DIVs?

lyndalouise · 06-15-2005, 02:41 PM

I have a series of DIVs on a page , each contains some links and an image. The DIVs seem to expand to accommodate the text but not the images. An example can be seen here: http://193.82.99.145/ICISTest2/

How can i get the DIVs to expand to fit the images?

HTML:
<div class ="boxes">
<div class="boxheader">Are you looking for information?</div>
<img src="./images/box_information.gif">
<ul id="navlist">
<li><a href=".\FindInformation\faq.htm">Search for services that can help</a><br>
<li><a href=".\FindInformation\sports.htm">Sporting opportunities in Sussex</a><br>
<li><a href="http://193.82.99.145/ICISforms/Enquiry/index.htm">Ask us for information</a><br>
<li><a href=".\FindInformation\events.htm">Events and activities in your area</a><br>
<li><a href=".\FindInformation\newsletter.htm">ICIS newsletter</a><br>
<li><a href=".\FindInformation\noticeboard.htm">News items</a></ul>
</div>

<div class ="boxes">
<div class="boxheader">Are you looking after someone?</div>
<img src="./images/box_caring.gif">
<ul id="navlist">
<li><a href=".\ForCarers\index.htm">Help for carers</a><br>
<li><a href=".\ForCarers\carerscard.htm">Emergency Alert Card Scheme for carers</a><br>
<li><a href=".\ForCarers\wellspring.htm">Newsletter for children with special needs</a><br>
<li><a href=".\ForCarers\carersonline.htm">West Sussex carers website</a><br></ul>
</div>

<div class ="boxes">
<div class="boxheader">How do we help other organisations?</div>
<img src="./images/box_organisations.gif">
<ul id="navlist">
<li><a href=".\ForOrganisations\roomhire.htm">Hire of ICIS rooms and equipment</a><br>
<li><a href=".\ForOrganisations\index.htm">Other resources for organisations</a><br></ul>
</div>
</td><td valign="top">


<div class ="boxes2">
<a href="./FindInformation/newsletter.htm">Summer newsletter now available!</a><br>
<a href="http://www.carersweek.org">National Carers Week</a><br>
13-19 June 2005<br>
<a href="./AboutSite/whatsnew.htm">What's new on this site</a>
</div>


<div class ="boxes">
<div class="boxheader">About ICIS</div>
<ul id="navlist">
<img src="./images/box_about.gif">
<li><a href=".\AboutICIS\contact.htm">Our contact details</a><br>
<li><a href=".\AboutICIS\index.htm">What we do</a><br>
<li><a href=".\AboutICIS\volunteering.htm">Volunteering at ICIS</a><br>
<li><a href=".\AboutICIS\jobs.htm">Jobs at ICIS</a><br>
<li><a href=".\AboutICIS\feedback.htm">Tell us what you think of our service</a><br>
<li><a href=".\AboutICIS\donations.htm">Make a donation</a><br>
</div></ul>

<div class ="boxes">
<img src="./images/box_sports.gif" class="floatimgright">
<b><a href=".\FindInformation\sports.htm">Sussex Disability Sports Database</b></a>
</div>

<div class ="boxes">
<img src="./images/box_carerscard.gif">
<b><a href=".\ForCarers\carerscard.htm">Carers Emergency Alert Card Scheme</b> </a>
</div>

<div class ="boxes">
<img src="./images/box_news.gif">
<b><a href=".\FindInformation\newsletter.htm">ICIS newsletter</b></a>

</div>
<div class ="boxes">
<img src="./images/box_news.gif">
<b><a href=".\ForCarers\wellspring.htm">Wellspring Newsletter</b></a>
</div>

<div class ="boxes">
<img src="./images/box_question.gif">
<b><a href=".\AboutSite\guide.htm">Do you need help using this website?</b></a>
</div>

CSS:
.boxheader {padding: 2px; background: #ffffff; color: #000000; font-weight:bold; font-size:medium; border-top: 0px solid #cccccc; border-bottom: 0px solid #cccccc; height: 10px; text-align: left; }

.boxes {height: auto; text-align: left; background: #ffffff; padding: 5px; border: 1px solid #663399; margin: 10px; margin-top: 0px; line-height: 1.5em;}
.boxes a {color: #660099; font-weight:bold; text-decoration: none; }
.boxes a.active {color: #660099; font-weight:normal; text-decoration: NONE; }
.boxes a:hover {color: #666666; font-weight:bold;text-decoration: none; }
.boxes a:visited {color: #660099;font-weight:normal;text-decoration: none; }
.boxes img{float: right; overflow: auto; height:100%;}

.images {padding: 5px; }

/* Hotspot Box on home page */
.boxes2 {text-align: left; background: #ffffff; padding: 5px; border: 2px solid #99cc00; margin: 10px; margin-top: 0px; line-height: 1.5em;}
.boxes2 a {color: #99cc00; font-weight:bold; text-decoration: none; }
.boxes2 a.active {color: #339900; font-weight:normal; text-decoration: NONE; }
.boxes2 a:hover {color: #666666; font-weight:bold;text-decoration: none; }

Thanks for your help

ronaldb66 · 06-15-2005, 02:56 PM

It's because the image are floated. You could include a clearer as the very last element in each div, with "clear: both" and minimised height, for instance a p without content, zero height, zero margins and padding and a 1px font size and line height.