SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Location
    czech
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 bug with clear:both

    Hello every body,

    I've got problem with CSS and IE6. I have 3-cols page, where left and right column have fixed width and central column is the rest of width of body... In this central column I have place for text, which can be written in one or two columns. These two columns are created with float: left of each div. so after that, I have element with clear:both - BUT - this clear is related to whole site - not only to the div, which create the central column.... and the new element is starting on the end of left/right column...

    Do you have any idea, how to solve this problem? (screenshot is here: http://pavel.vte.cz/cssbug.gif)

    Here is my sample code... I've used styles instead of classes for easier orientation

    ====

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>

    <body>

    <div style="float: right; width: 150px; background-color:#FF0;">
    this is right column with fix width
    this is right column with fix width
    this is right column with fix width
    </div>

    <div style="float: left; width: 150px; background-color:#999999; ">
    this is left column with fix width
    this is left column with fix width
    this is left column with fix width
    this is left column with fix width
    </div>

    <div style="background-color:#009999; margin-left: 150px; margin-right: 150px;">
    <div style="float: left; width: 50%; background-color:#009900;">
    left col in "text-area"
    </div>
    <div style="float: left; width: 50%; background-color: #00CC99; margin: -1px;">
    right col in "text-area"
    </div>
    <div style="clear: both;">
    solo col in text adrea and with clear:both
    </div>
    </div>

    </body>
    </html>


    ====

    Thanks for any advice, how to solve that. Completly different code isn't problem if it works and have two fix-sized columns

    Pavel

    PS: Absolut position of side-columns isn't solution, because i have in page footer and when height of text in center is lower than any of side-columns, than part of the footer will be hidden behind these side-columns.

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

    Try adding height:1% to the parent div.
    Code:
    <div style="background-color:#009999; margin-left: 150px; margin-right: 150px;height:1%"> 
    	<div style="float: left; width: 50%; background-color:#009900;"> left col 
    	  in "text-area" </div>
    	<div style="float: left; width: 50%; background-color: #00CC99; margin: -1px;"> 
    	  right col in "text-area" </div>
    	<div style="clear: both;"> solo col in text adrea and with clear:both </div>
    </div>
    This really needs to be hidden from ie5 mac and other browsers so use this format instead.
    Code:
    /* commented backslash hack v2 \*/ 
    * html #elementname {height:100%;} 
    /* end hack */
    If that doesn't work then the last resort is to add an inner wrap to that centre content which has a width of 99.9% and is floated also. Then the clearer div only clears within its own context (although this is not guaranteed cross browser behaviour as clear:both may in fact clear all floated elements and not just those in their own stacking context. However it seems to work ok on most browsers.)

    However I think my first solution of height:1% will work fine. Ie treats height as min-height anyway and will just expand the container as rewuired. However it helps IE to work out its width correctly and maintains its integrity better.

    paul

  3. #3
    SitePoint Member
    Join Date
    Oct 2004
    Location
    czech
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeeees! It works! Now, I am much more happier than a few hours ago

    Thank you!
    Pavel


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
  •