Results 1 to 2 of 2

Thread: Images overlapping divs

  1. #1
    Join Date
    Jul 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Images overlapping divs

    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
    Code:
    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

    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>

  2. #2
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Specify the width/height of the image:
    Code:
    <img src="images/traditional-souvenirs.jpg" alt="Souvenirs" width="25" height="30">
    - Mike

Bookmarks

Posting Permissions

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