Grow your CSS skills. Land your dream job.

Relative positioning w/ floats?

  • # December 20, 2009 at 3:18 pm

    Am having issues in older versions of IE/Safari/Firefox with a relatively positioned div that is floated right… is there something I’m missing here?

    If you’re running current versions of these browsers, you can see the page correctly displayed at http://www.beautifulmachine.com

    # December 20, 2009 at 8:15 pm

    I’m quite sure it’s a width problem. If you change the #wrap width from 700px to 750px or something then it should be fine.

    # December 20, 2009 at 11:23 pm

    That’s what I thought as it looks like the #contact div is getting bumped down due to a width issue of the wrapper… however no matter how wide I make the #wrap it doesn’t make a difference… any other ideas? Thanks for your help!

    # December 20, 2009 at 11:31 pm

    It is because of WHERE the float is beginning in the code.

    If you took the entire contact div and put it ABOVE your <h1>, you’re fine.

    So, what you should do is wrap the h1, logo, and bracket all in another dive and float it to the left.

    # December 21, 2009 at 3:01 pm

    Doc,

    That worked like a charm. Thanks so much for your help, I really appreciate it… as I’m relatively new to standards compliant CSS and semantic XHTML, I’m curious, does placing the contact info above the h1 break the rules of clean and semantic markup?

    # December 21, 2009 at 3:48 pm
    "2220" wrote:
    Doc,

    That worked like a charm. Thanks so much for your help, I really appreciate it… as I’m relatively new to standards compliant CSS and semantic XHTML, I’m curious, does placing the contact info above the h1 break the rules of clean and semantic markup?

    You could say yes, but on a page with such little content I wouldn’t worry about it.

    If you wanted to make sure the <h1> stayed above the contact info, you would need to wrap it and the two images in another div that would be floated to the left.

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

You must be logged in to reply to this topic.

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