[thelist] [css] image overlap problem

Paul Bennett paul at teltest.com
Thu Jan 30 16:15:00 CST 2003


in the template to a work site:
http://www.teltest.co.nz/site.php
There is an image in the main content text area of the page. This image
is set inline and the text is floated to the left of it. Problem is when
the text content makes the div  shorter than the image, the image will
overlap the border of the containing div. (You can see this on the url
in question)
I can't set the height of the div as some pages contain much more text,
and so when the height is set (say to 400px), the content will continue
beyond the border of the containing div. (I have tried this already)
Is there anyway (without uneccessarily padding the content text) that I
can get the containing div to wrap entirely around the image whilst
still being flexible enough to  grow higher as the content increases?

the image styles are:
#contentImage
    { color: inherit; float: right; display: inline;  padding: 5px;
border: solid 1px #003366;  background-color: #fff;  margin: 3px; }

the containing div styles are:
#contentText
    { padding: 20px;  background-color: #eee;   font-size: 12px;  color:
#003366;  border: solid 1px #003366; }

--
Paul Bennett
Internet Developer
Teltest Electronic Design
--------------------------
Phone : 64 4 237 0767
Web : http://www.teltest.com
Wap : http://wap.teltest.com
Email : paul at teltest.com
--------------------------





More information about the thelist mailing list