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 5 of 5
  1. #1
    New Coder Ibanez's Avatar
    Join Date
    Nov 2008
    Location
    South Africa
    Posts
    73
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Internet Explorer Floating div issue in IE8

    Hi all!

    Im having an issue in IE8 where I have a div, (#specialwrap) within another div (#content).
    In FF, Opera and Safari the specials div is floating to the right and the text in my content div is wrapping around it, all is good here.
    In IE8 however, #specials is floating right, but the text in #content gets pushed down.

    Here is the CSS
    Here is the HTML

    Can somebody please tell me why IE8 does this, and how to fix it (Possibly without a hack?)

    Thank you!
    If your willing to teach, Im willing to learn...

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Have a try by removing width:845px; from #content
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Ibanez (05-26-2009)

  • #3
    New Coder Ibanez's Avatar
    Join Date
    Nov 2008
    Location
    South Africa
    Posts
    73
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Thanx, its working like it should now!

    One last thing, could you please explain why this happened? I mean the container div's width stays the same, unless its content is wider than the container...?
    If your willing to teach, Im willing to learn...

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by Ibanez View Post
    Thanx, its working like it should now!

    One last thing, could you please explain why this happened? I mean the container div's width stays the same, unless its content is wider than the container...?
    That's the property of floated elements. FF allows floated elements to overlap each other, where as IE doesn't. Also, in all browsers, the successor element of a floated element try to occupy the remaining space left by the floated element, unless its cleared(by setting clear in style)

    You may experiment it by setting borders around your #content and #specialswrap. Also, setting a suitable margin-right, say margin-right:260px; to your #content (after removing the width applied on it), will give you a 2 column layout(without wrapping the lower portions of #content wrap around the floated element, like http://bonrouge.com/2c-hf-fluid(r).php)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder Ibanez's Avatar
    Join Date
    Nov 2008
    Location
    South Africa
    Posts
    73
    Thanks
    11
    Thanked 0 Times in 0 Posts
    I see!

    Thank you once again!
    If your willing to teach, Im willing to learn...


  •  

    Posting Permissions

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