[thelist] Image placement using CSS

Peter Abramowicz pabramow at web.net
Sun Nov 10 01:10:00 CST 2002


> So there's two problems, both IE6:
> 1) border won't wrap around both the paragraph and he image
> 2) images are not visible becuase they appear to be underneath the box
> containing the text.
>
> I have put up a test page at http://www.edenflowers.co.nz/test.html
> (apologies for the slow load on the images, I've put borders around so you
> don't need to wait).

Try this;

<html>
<head>
<style>
p.example {
 float: left;
 margin-left: 20px;
 margin-right: 20px;
 margin-bottom: 20px;
 border:1px solid #000000;
 background : transparent;
 padding: 0px 10px 0px 10px;
 width: 90%;
 }
img.rightimg {
 float: right;
 border: 2px solid #000000;
 }
img.leftimg {
 float: left;
 border: 2px solid #000000;
 }

</style>
</head>
<body>

<p class="example">
<img class="rightimg" src="gift1.jpg" width="300" height="351" alt="Flower
arrangements" />
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text
<br />
Bouquet prices start at $30.00. Posies start at $15.00
</p>
<br  style="clear:right" />
<p class="example">
<img class="leftimg" src="gift2.jpg" width="250" height="473" alt="Flower
arrangements" />
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text t
ext text text text text text text text text </p>

</body>
</html>

It's not perfect but it's a start.

PeterA.




More information about the thelist mailing list