SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Nov 2002
    Location
    Dubai
    Posts
    714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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?

    HTML Code:
    <!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. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'll find more on float clearing here.

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    SitePoint Guru
    Join Date
    Nov 2002
    Location
    Dubai
    Posts
    714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  6. #6
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    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.
    Hmm. Never knew.
    Cross browser css bugs

    Dan Schulz you will be missed

  7. #7
    SitePoint Guru
    Join Date
    Nov 2002
    Location
    Dubai
    Posts
    714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome

    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.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  9. #9
    SitePoint Guru
    Join Date
    Nov 2002
    Location
    Dubai
    Posts
    714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks once again, Kravvitz.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •