Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2005
    Thanked 0 Times in 0 Posts

    How do I stop my images overlapping their container DIVs?

    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:

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

    <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="">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 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 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>
    </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>
    <!-- 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 class ="boxes">
    <img src="./images/box_sports.gif" class="floatimgright">
    <b><a href=".\FindInformation\sports.htm">Sussex Disability Sports Database</b></a>

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

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

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

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

    .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

  2. #2
    Senior Coder
    Join Date
    Jun 2002
    The Netherlands, Baarn, Ut.
    Thanked 0 Times in 0 Posts


    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.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts