Re: Unaccessible floating??

In article
<42c2d208-b78f-403d-9ce9-d0076b42c857@xxxxxxxxxxxxxxxxxxxxxxxxxxx>,
UKuser <spidercc21@xxxxxxxxxxx> wrote:

Hi Folks,

I'm slighly confused about the following code which I've used for the
first time today.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
<head>
<title>test page</title>
</head>
<body>
<div style="width:500px;border:1px solid blue;float:left;">
<div style="width:100px;float:right;">
<img src="http://css.maxdesign.com.au/floatutorial/images/
image.gif" width="100" height="100">
</div>
<p>a lonLorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo.</p>
</div>
</body>
</html>

Now visually the text appears to the left and the image to the right
but in code, and therefore when CSS is turned off the image appears
before the text. However if you move the div below the P tag then the
P takes up the full space and won't allow the image to appear side by
side.

I can appreciate that this is probably because each takes its space in
the order its coded but from an accessibility perspective this is
wrong. Is there a work around for this or am I missing something?


How about a bit simpler:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
<html>
<head>
<title>test page</title>
<style type="text/css" media="all">
div {border: 1px solid blue; width: 500px; overflow: hidden;}
img {float: right;}
</style>
</head>
<body>
<div>
<img
src="http://css.maxdesign.com.au/floatutorial/images/image.gif"; alt=""
height="100" width="100">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>
</div>
</body>
</html>

--
dorayme
.

Relevant Pages