Images overlapping DIVs - please help

[lyndalouise]

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">

<!-- HOTSPOT BOX -->
<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>
<!-- END HOTSPOT BOX -->


<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

[jscheuer1]

This has something to do with it:

.boxes img{float: right; overflow: auto; height:100%;}

Setting overflow to 'auto' seems to be resulting in:

It is up to the browser to choose and it is choosing 'overflow:visible' (content is not clipped and may be rendered outside of the element's box).

Combining that with the ambiguous height:100% (100% of what?) is likely responsible for the images floating outside the boxes' borders, an effect by the way, many would say is more interesting than having everything 'inside the box'. If you are determined to get these images inside the boxes, I'd first try getting rid of the overflow:auto, then the height:100%. If one or both of those don't get it, removing the 'float:right' may help*. Finally, if dumping the float is not an option (probably won't look good without it), you can pad the boxes' content by inserting dummy lines containing only the '&nbsp;' character to make them big enough to contain the images. Ex:

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

There is another problem with the page. There are many bgcolor attributes set to hex values without the '#' prefix. This is fine in IE but under Mozilla, the colors are not rendered. Ex:

<td valign="top" align = "left" bgcolor="ccccff" width="5%">

should be:

<td valign="top" align = "left" bgcolor="#ccccff" width="5%">

* Float is also used here in the stylesheet:

.floatimgright {
float:right;
valign:top;
margin-top:2px;
margin-left:10px;
margin-bottom:2px;
}

and applies to the 'Sports Database' example.

[mwinter]

This has something to do with it:

.boxes img{float: right; overflow: auto; height:100%;}

Indeed, but it has nothing to do with the overflow or height properties.

The float property behaves similarly to the absolute value for the position property in that both produce boxes that stop affecting the layout of content around them. In CSS-speak, floated and absolutely-positioned boxes are taken 'out of the flow'. As the floated elements aren't considered when laying out the rest of the content, they don't count towards the height of their containers.

If you can't assign a specific height to the containing elements, then insert an extra element that has a 'clear: right' declaration applied to it. This will be forced below the floated element, stretching the container.

Combining that with the ambiguous height:100% (100% of what?)

100% of the containing block, of course. However, using percentages is only useful when the containing block has an explicit height. If it is sized by its content (height: auto), then any percentage also acts like the auto value. The only exception I can think of is the html element: setting this to 100% means 'the viewport height'.


There are other problems with the markup that John didn't mention:

• The 'boxheader' div elements are better implemented with header elements, surely? I'd guess that h2 is appropriate (one structural level down from a 'main' heading), but it's difficult to be sure from the snippet.
• Some of your URLs contain backslashes. They shouldn't. Ever.
• Remove the forced line breaks from the list items. If you want extra space, add vertical padding or margins.
• Some of your markup is malformed (overlapping elements, for example). Run it through a validator.
• Class names should be semantic (convey meaning, not form) and boxes2 certainly isn't. Consider what makes these 'boxes' different from others. What do they represent?

Mike

[lyndalouise]

Thank you both for all of your comments and pointers. As you can probably gather from the code, I have a lot to learn about CSS and your replies are very helpful.

I have solved the original problem of the images staying inside the boxes by using the clear declaration as suggested, thanks.

I am now going to address some of the other issues you pointed out in my very sloppy code!

Thanks again