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

[X_Gary_X]

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

 

[DHDdirect]

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

 

[X_Gary_X]

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

 

[DHDdirect]

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

 

[X_Gary_X]

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.)

 

[ronaldroe]

Move the div that contains the image into the "briefcase" div. I'm on Chrome and that fixed it.

 

[X_Gary_X]

it is in there already...how do you mean?

 

[ronaldroe]

My apologies. I just looked at the code again. I didn't mean "briefcase". I meant "content". Move the image into the "content" div.

 

[DHDdirect]

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.

 

[X_Gary_X]

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!

 

[ronaldroe]

The adjustment I made is attached. Works on my machine using Chrome 9.0.597.107