SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Another IE6 clear:both problem!

    Hi there,

    I am a having problem with a page of mine with IE with clearing a div.

    I basically have 4 divs- the first two are floatef left and the 3rd is floated right, so they form 3 columns. I want my fourth div to clear the flow completely and be floated right. If you view my example in any browser except IE7, then you'll see what I'm trying to achieve. However IE6, for some reason ignores the clear:both altogether.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
      <title>Test</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <style>
    
    
    .clearfix:after {
        content: "."; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;
    }
    
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    /* End hide from IE-mac */
    
    
    </style>
    
    </head>
    
    <body>
    
    <div style="width:700px;border:1px solid black;" class="clearfix">
    
    <div style="width:80px;height:80px;background:red;float:left;"></div>
    <div style="width:450px;background:blue;float:left;">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In pretium lobortis felis. Pellentesque sed magna suscipit justo tincidunt tempor. Donec sagittis, quam sodales malesuada consectetuer, purus quam elementum quam, non mollis massa orci sit amet est. Sed libero nunc, cursus eu, porta id, dapibus et, ligula. Ut suscipit feugiat justo. Cras tellus dolor, nonummy eu, luctus eget, pellentesque et, dolor. Aenean id diam vitae nunc nonummy pulvinar. Etiam aliquam pharetra lacus. Nulla ultrices risus. Aliquam feugiat dapibus lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque quis dui ac quam cursus adipiscing. Nullam cursus dictum diam. Cras gravida convallis diam.
    
    Duis auctor eros a lorem. Vivamus hendrerit mattis dolor. Phasellus at eros nec orci suscipit consequat. Aliquam ut lorem vel arcu pulvinar fringilla. Aliquam aliquam pulvinar nisl. Phasellus facilisis metus eget velit tincidunt hendrerit. Etiam at odio nec felis vulputate rutrum. Duis dignissim malesuada metus. Nulla tellus. Duis tempor dictum lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam est. In sodales eros ac est. Vivamus dui neque, porttitor congue, facilisis eget, gravida sed, ipsum. In et tellus ut diam ultrices congue. In at magna. Maecenas sed quam. Etiam laoreet quam quis tortor. Cras pellentesque. Vestibulum vitae erat nec lectus consectetuer adipiscing. 
    </div>
    
    <div style="width:170px;height:100px;background:yellow;float:right;"></div>
    
    <span style="width:100px;height:100px;background:black;clear:both;float:right;"></div>
    
    </body>
    
    </html>
    Any ideas you guys may have as to how to fix this, would be greatly appreciated

    Kind Regards

    James

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Yes IE has problems when you float elements left and right and then try to clear them.

    The easiest solution is just to add a clearer.

    Code:
        <div style="width:170px;height:100px;background:yellow;float:right;"></div>
        <div style="clear:both"></div>
        <div style="width:100px;height:100px;background:black;clear:both;float:right;"></div>
    </div>
    </body>
    </html>
    The last block you had as a span but a div is a more semantic choice.

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The last block you had as a span but a div is a more semantic choice.
    He also had a </div> closing the <span> so was probably caught in two minds

  4. #4
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hehe, Fridayafternoon-itus! Thanks for your help guys


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
  •