Hi Esmi, At the risk of disagreeing with a forum moderator – I now have a working solution. My thanks to Robin for keeping me looking but mostly my thanks to Marco Del Corno who posted this last year.
And you can
see the results here
My HTML is now like this:
<img class="imageC" src="https://www.theunicornproject.co.uk/images/lambmountain.jpg" height="100" width="150" alt="Lambs in sunshine halter" />
<div class="l"><strong>And</strong> of course there is the whole farm environment that contributes to the student's sense of well being ... And of course there is the whole farm environment that contributes to the student's sense of well being ... And of course there is the whole farm environment that contributes to the student's sense of well being ... </div>
<div class="r">The lambs are also visited each year by local school and scout groups ... The lambs are also visited each year by local school and scout groups ... The lambs are also visited each year by local school and scout groups ... The lambs are also visited each year by local school and scout groups ... </div>
and the necessary CSS is
.imageC {
position: absolute;
/*top: 0;*/
left: 50%;
margin-left: -75px;
}
.l, .r {
width: 49%;
}
.l {
float: left;
}
.r {
float: right;
}
.l:before, .r:before {
content: "";
width: 75px;
height: 100px;
}
.l:before {
float: right;
}
.r:before {
float: left;
}
I guess this is a bit of a workaround and it would be great to have it as a genuinely floating image with the ability to control the text floating on all sides – I will reply to Robin separately about the slow implementation in CSS3 of regions and templates.
