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

X_Gary_X · 03-08-2011, 09:31 PM

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 · 03-08-2011, 09:48 PM

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 · 03-08-2011, 10:00 PM

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 · 03-08-2011, 10:13 PM

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 · 03-08-2011, 10:30 PM

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 · 03-09-2011, 12:28 AM

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

X_Gary_X · 03-09-2011, 12:49 AM

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

ronaldroe · 03-09-2011, 12:53 AM

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 · 03-09-2011, 07:26 AM

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 · 03-09-2011, 09:06 AM

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!

03-08-2011, 09:31 PM	#1
X_Gary_X Bronze Member Join Date: Mar 2011 Posts: 40	In Google Chrome, two Div's are overlapping...plz help 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 Last edited by X_Gary_X; 03-08-2011 at 09:48 PM. Reason: insert image to help

03-08-2011, 09:48 PM	#2
DHDdirect Gold Member Join Date: Feb 2011 Location: Australia Posts: 369	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 __________________ Jason H. DHDdirect.com Domains - Hosting - Design

03-08-2011, 10:13 PM	#4
DHDdirect Gold Member Join Date: Feb 2011 Location: Australia Posts: 369	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 by DHDdirect; 03-08-2011 at 10:16 PM.

03-08-2011, 10:30 PM	#5
X_Gary_X Bronze Member Join Date: Mar 2011 Posts: 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 by X_Gary_X; 03-08-2011 at 10:35 PM.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

03-08-2011, 10:00 PM	#3
X_Gary_X Bronze Member Join Date: Mar 2011 Posts: 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

03-09-2011, 12:28 AM	#6
ronaldroe Platinum Member Join Date: Jan 2011 Location: Oklahoma City, OK Posts: 676	Move the div that contains the image into the "briefcase" div. I'm on Chrome and that fixed it.

03-09-2011, 12:49 AM	#7
X_Gary_X Bronze Member Join Date: Mar 2011 Posts: 40	it is in there already...how do you mean?

03-09-2011, 12:53 AM	#8
ronaldroe Platinum Member Join Date: Jan 2011 Location: Oklahoma City, OK Posts: 676	My apologies. I just looked at the code again. I didn't mean "briefcase". I meant "content". Move the image into the "content" div.

03-09-2011, 09:06 AM	#10
X_Gary_X Bronze Member Join Date: Mar 2011 Posts: 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!