SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Nov 2003
    Location
    UK
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    running text around an image

    I have been successsfully creating two column pages that include images which can be located to the left or right of the right-hand column with text running around them using the following CSS styles:

    /* THIS STYLE IS FOR THE LEFT-HAND PANEL */
    div#left {border: 2px solid black; background: white; float: left; width: 180px; margin-top: 10px; margin-left: 5px; margin-right: 10px; padding: 10px; left: 80px; right: 80px; top: 40px;}
    div#title {background: #663A00; color: white; font-size: 100%; text-align: left; padding: 5px; font-weight: bold;}
    div#left h3 {background: rgb(75%,66%,66%); font-size: 110%; color: #52002d; text-align: center;}
    /* THESE STYLES ARE FOR THE MAIN RIGHT-HAND CONTENT PANELS */
    /* These styles govern the main topic panel */
    div#topic {border: 2px solid black; background: #e7f7e6; float: left; width: 490px; margin-top: 10px; padding: 25px; left: 80px; right: 80px; top: 40px; text-align: justify;}
    div#topic h3 {background: rgb(75%,66%,66%); font-size: 110%; color: #52002d; text-align: center;}
    div#topic hr {color: #006600;}
    div#topic .product {color: #990000;}
    div#topic img.left {float: left; clear: left; margin: 0 10px 0 0; padding: 0; border: 0 0 0 0;}
    div#topic img.right {float: right; clear: right; margin: 10px 0 0 10px; padding: 0; border: 0 0 0 0;}
    div#search {position: absolute; top: 660px; left: 32px; width: 150px; height: 200px; 9px Verdana, Arial, Helvetica, sans-serif; z-index: 100;}

    I have now attempted to create a basic 3-column page with a header using exactly the CSS style recommended in Dan Shafer's 'Designing Without Tables'. It works fine until I add an image into the 'Content' style column which is relatively positioned, the left and right columns being absolutely positioned. When I add such an image the adjacent text lines up with the bottom of the image and if I try to have the text run around the image as suggested in Dan's excellent book by using the 'float: left' property, the image disappears beneath the content box.

    I've tried everything I can think of, including modifying the z-index properties of the image but nothing helps. Can anyone offer a solution please?

  2. #2
    SitePoint Enthusiast Gamblingharry's Avatar
    Join Date
    Apr 2003
    Location
    UK
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Might need to put clear:none; in your main content middle column?

  3. #3
    SitePoint Member
    Join Date
    Nov 2003
    Location
    UK
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the suggestion. I've tried that but unfortunately still doesn't work.

  4. #4
    SitePoint Member
    Join Date
    Nov 2003
    Location
    UK
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    More investigation reveals that this problem is related to the use of a background color in a div in IE6. Without the background color the code works fine. Hope this information might be of help to others.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,387
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    When you say disapperears beneath he content box do you mean you can't see the image at all? If so have you tried adding position:relative to the floated image as IE likes children of positioned elements to have position relative set.

    Paul

  6. #6
    SitePoint Member
    Join Date
    Nov 2003
    Location
    UK
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul

    You are indeed a guru sir. Your suggestion fixed the problem that had otherwise seemed insuperable. Very many thanks for the insight.

    Regards

    John Vale


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
  •