In Google Chrome, two Div's are overlapping...plz help

Discussion in 'Web Design' started by X_Gary_X, Mar 8, 2011.

to remove all ads.
  1. X_Gary_X

    X_Gary_X New Member

    Messages:
    40
    Hi everyone,

    I'm a rookie and I'm working on my first real site. I've got about two weeks of CSS in me, but I've been messing around with html, and adobe for years.

    Anyways, I'm having a problem with how my home page looks in Google Chrome, and was hoping someone had a clue. The home page looks fine in IE and firefox, but in Chrome, I have a div overlapping another div somehow, ignoring all margins.

    My CSS code can be seen at the botton right-hand corner of the home page via a link from W3Schools.

    Any insight would be extremely helpful. Thanks!

    http://www.rightfitcareers.org

    Gary

    [​IMG]
     
    Last edited: Mar 8, 2011
  2. DHDdirect

    DHDdirect New Member

    Messages:
    383
    I don't have my editing computer in front of me but try putting a float:left; in to the content style and a clear:both; in the content2 style

    also, your background image is a fairly large file. May want to consider optimizing it a bit.

    Hope that helps
     
  3. X_Gary_X

    X_Gary_X New Member

    Messages:
    40
    yeah, that didn't work, but thank you. That just pushed all the content way below the briefcase, and messing with the margins didnt help adjust that.

    i will optimize it, ty
     
  4. DHDdirect

    DHDdirect New Member

    Messages:
    383
    Alright.. sorry it's kind of hit and miss without my able to sample some things myself but instead of the float:left; elements how about trying display:inline-block; instead. Put it in both the img and content styles.

    If that doesn't help I'll test some stuff out when I get home, unless someone else helps you out first :)
     
    Last edited: Mar 8, 2011
  5. X_Gary_X

    X_Gary_X New Member

    Messages:
    40
    That did the same thing..pushed all the content out of "briefcase" div class it looks like...weird.

    (note: it doesn't do it on the career page, because there is a scroll bar. I can add a scroll bar, and it will somewhat fix the issue, but why? There has to be a reason why messing with the overflow style changes this. I don't want a scroll bar though on the main page.)
     
    Last edited: Mar 8, 2011
  6. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Move the div that contains the image into the "briefcase" div. I'm on Chrome and that fixed it.
     
  7. X_Gary_X

    X_Gary_X New Member

    Messages:
    40
    it is in there already...how do you mean?
     
  8. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    My apologies. I just looked at the code again. I didn't mean "briefcase". I meant "content". Move the image into the "content" div.
     
  9. DHDdirect

    DHDdirect New Member

    Messages:
    383
    Ok.. This is certainly a hard one. I wasn't able to get it working with what Ron suggested but I may be doing something different.

    I've tried a bunch of things and figured I'd go about it by creating a structure myself and see how it reacts.

    You can have a look at what I've done here or download the attachment.

    The top section shows you the structure with colored backgrounds to allow you to view how the divs are acting with the specific css and below that is shows you with some information from your own site.

    I believe it will either boil down to something in your structure or something in your css causing this issue. None the less, I believe you are a bit heavy on the css code and probably will find half of it isn't needed. (especially margins, you'll notice there isn't any in my css).

    I hope that helps and keep us posted on what you find.
     

    Attached Files:

  10. X_Gary_X

    X_Gary_X New Member

    Messages:
    40
    Dude, you're awesome. I really appreciate that. Like I said, I'm new and still learning. I have to go to work right now, so I can't mess with it, but I will when I get home and let you know. Thanks!
     
  11. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    The adjustment I made is attached. Works on my machine using Chrome 9.0.597.107
     

    Attached Files:

Share This Page