Grow your CSS skills. Land your dream job.

Very strange issue with positioning and floats

  • # March 23, 2012 at 11:30 am

    Hello everyone,

    I am working on a site and just debugged an issue that is extremely confusing. I have a relative div at 940px, and inside of this div I have 2 floated divs at 300px for the left and 600px for the right, with a 20px margin-right on the left div. I also have an img tag with an absolute positioning on it.

    The strange thing is this … the img disappears when the other divs both have their floats on them, but the img reappears when I remove at least one of the floats from either div.

    Can anyone shed light on this issue? I find is unusual that just because I have 2 divs floated that my absolutely positioned image will disappear.

    Thanks!

    # March 23, 2012 at 11:34 am

    I forgot to mention … the issue is only happening with IE7 (compatibility mode)

    # March 23, 2012 at 11:53 am

    IE. The bane of my existence. Your measurements seem fine. Are you clearing the floats using the clearfix hack after the block. Also, could you send me a link or snippet. I’d be glad to take a look at it.

    # March 23, 2012 at 11:53 am

    If that’s all there is to your site, then it should be something like this? http://jsfiddle.net/senff/8Ps4q/

    It depends where/how you positioned the image, what the height is of your container div, etc. etc., so please try to give a little more details.

    # March 23, 2012 at 2:19 pm

    Honestly, I’ve never had this particular issue before. My employer just had me switch over to using the 960 grid (I don’t like it very much). I don’t know if there is a style in the grid css causing the error, but I find myself having to do a lot of work arounds for the grid to actually work. What is supposed to reduce my work time is extending it because it is forcing me to do more coding instead of less.

    As far as more info, I really don’t have a way for you to see what is happening, since we are still developing the site. It is such a strange issue, I has to find yet another work around to make it function properly.

    Thanks for the replies, but there is little you can probably do since I can’t show you, and you can’t reproduce the error.

    Take care.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".