SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
Thread: running text around an image
-
Nov 4, 2003, 07:15 #1
- 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?
-
Nov 4, 2003, 07:19 #2
Might need to put clear:none; in your main content middle column?
-
Nov 4, 2003, 09:16 #3
- 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.
-
Nov 6, 2003, 14:21 #4
- 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.
-
Nov 6, 2003, 16:28 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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
-
Nov 7, 2003, 04:42 #6
- 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