Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer IE6 - strange float rendering

    Hi,

    got a problem with the following code:

    <div style="float: left; width: 100px; height: 10px; background-color: red;"></div><div style="float: left; width: 100px; height: 10px; background-color: green;"></div>
    <div style="float: left; clear: left; width: 100px; height: 10px; background-color: yellow;"></div><div style="float: left; width: 100px; height: 10px; background-color: blue;"></div>

    That's all, I simplified it to better illustrate my problem. Thing is, that the Firefox renders it in a way I want it, but IE doesn't. Instead of placing the blue div in the second line next to the yellow div (as in FF), it places it in the first line next to the green one. Is there some workaround ? Thanks in advance.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I can't help you directly but you may find some help here.

    http://www.webcredible.co.uk/user-fr...explorer.shtml

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Not sure why it's not clearing the float on the third box, but you can put the boxes in a container div with a width equal to the width of the containing elements. This will force the third element down to the second row even if it is being floated.

    Code:
    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    		<title>Help</title>
    	</head>
    	<body>
    		<div style="width:200px;">
    			<div style="float: left; width: 100px; height: 10px; background-color: red;"></div>
    			<div style="float: left; width: 100px; height: 10px; background-color: green;"></div>
    			<div style="clear: left; float: left; width: 100px; height: 10px; background-color: yellow;"></div>
    			<div style="float: left; width: 100px; height: 10px; background-color: blue;"></div>
    		</div>
    	</body>
    </html>
    Basscyst
    Helping to build a bigger box. - Adam Matthews


  •  

    Posting Permissions

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