Using CSS clear property to force elements to display below floated element

HTML & CSS
1

I am using the example given in page 263 of the CSS Anthology by Rachel Andrew. I am trying to use the clear property to position a paragraph below a floated element. Unfortunately, it is not working for me. My paragraph is getting aligned next to the image when I view it it on my laptop in IE 6 as well as Firefox.
I am giving a code below. Unfortunately freewebs.com which I use is undergoing some maintenance today and I am not able to upload the example for you to see. Why is the example not working for me?

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Float Image</title>
<style type="text/css">
.rightimg {
float: right;
margin-left: 20px;
margin-bottom: 6px;
}
clear {
 clear: both;
}
p, ul {
 border: 2px solid ~000000;
}
</style>
</head>
<body>
<h1>CSS Positioning and Layout</h1>
<img src="McNamaraPuneet.jpg" width="319" height="255" alt="Pooja and Priya" class="rightimg" />
<ul>
<li>List One</li>
<li>List Two</li>
<li>List Three</li>
<li>List Four</li>
<li>ListFive</li>
<li>List Six</li>
<li>List Seven</li>
<li>List Eight</li>
<li>List Nine</li>
</ul>
<p class="clear">I am trying to use the <B>CLEAR PROPERTY</b> to force this paragraph to be displayed below the floated element.I am trying to use the clear property to force this paragraph to be displayed below the floated element.I am trying to use the clear property to force this paragraph to be displayed below the floated element.I am trying to use the clear property to force this paragraph to be displayed below the floated element.</p>
</body>
</html>
2

You’ll find more on float clearing here.

3

clear { should be .clear {

Inline elements, like <img>, aren’t allowed to be children of <body>.

Also you should remove the slash from the <img>. You’re using HTML, not XHTML.

4

Tyssen,

Thanks for the link.

Kravvitz,

Thanks. It was such a silly error. I had put clear instead of .clear in my code. As soon as I changed it, I was able to display the paragraph below the floated image.

But I have a doubt.

Inline elements, like <img>, aren’t allowed to be children of <body>.

Also you should remove the slash from the <img>. You’re using HTML, not XHTML.

I was only following the example given in the book. If it is not allowed, why is it mentioned in the book like that? Can anybody clear my doubt?

5

Inline elements are allowed to be children of <body> when you use a Transitional doctype instead of a Strict doctype. (Don’t switch to a Transitional doctype for that reason though.)

Many of us put a <div> around everything inside <body> and thus avoid the issue.

6

Hmm. Never knew.

7

Thanks, Kravvitz.
Would I have been right if I had put the inline element <img> inside <p>. A block level element like <p> is allowed to contain an inline element like <img>, isn’t it?

8

You’re welcome :slight_smile:

If you feel the alternate text for the image constitutes a paragraph, then use a <p>, otherwise use a <div>. Not all block-level elements may contain inline elements, but those two can.

9

Thanks once again, Kravvitz.