DIVs overlapping with browser resize. Absolute Positioning problem?

[Kitastrophe]

Update:
Thanks for the help! I will look at the examples provided and work on fixing my code. If I have any other problems I’ll post again.

Hey everyone, I am having an issue with my DIVs overlapping when the browser resizes. I’m pretty new to CSS, so any help is appreciated.

After doing some research, it looks like it’s due to the position:absolute, but any coding I have tried isn’t working or messes up my images. When I use overflow:hidden, it cuts off the images I have on top of/above my DIVs, I’d like to keep them there if possible.

The site isn’t up and running yet, so I just included the CSS in my Pen. If you need anything else, I’d be happy to update that. I can also include a screenshot if anyone needs it.

http://codepen.io/Kitastrophe/pen/fwaCh

Thank you!

Edit:
I updated the Pen file to include my HTML, and here is a screenshot of what the site looks like.
http://img.photobucket.com/albums/v202/Spaceduck24/site.jpg

I was using position:absolute to put those banners on top of my DIVs, any other method I used didn’t quite work.

[theacefes]

Could you include the HTML structure?

[Kitastrophe]

I can, but I’ll have to upload my images so that they show up. Give me a few minutes and I’ll have that updated.

[Paulie_D]

>it looks like it’s due to the position:absolute

Probably….this is why it’s one of the last layout options one should employ

[Paulie_D]

>I’ll have to upload my images so that they show up. Give me a few minutes and I’ll have that updated.

Use LoremPixel.com for replacement images.

[Kitastrophe]

Thank you Paulie_D for that suggestion! The Pen has been updated. The class=”ribbonlikes” and class=”psst” are a banner and speech bubble that sit on top of that DIV, but right now all of the images are random from the LoremPixel site.

[Paulie_D]

Am I right in thinking that you only care about the sidebar div with all the images in it?

[Kitastrophe]

That’s the main problem. That’s the DIV that ends up overlapping over everything else. I can add the other content if needed.

[Paulie_D]

To be honest, I wouldn’t even attempt to correct what you have there because of all the positioning makes it so inflexible.

There are at much better layout options.

http://learnlayout.com/

Do you have an image of what the design is supposed to look like…we could offer some much simpler layout options?

[Kitastrophe]

I went ahead and added my other DIV to the Pen. That class=”ribbonsocial” is another banner that sits on top.

[Kitastrophe]

I’ll look into that site, but the reason I have that absolute positioning is for banners to sit on top of my DIVs. That was the only way I researched that worked.

[Kitastrophe]

Here is what I have right now:

http://img.photobucket.com/albums/v202/Spaceduck24/site.jpg

That top navigation may or may not be staying, I was just using it for practice from a tutorial site.

[Paulie_D]

OK…..but there is no reason you have to absolutely position **everything**.

All you really have there is a `

` with a `nav` section underneath followed by a basic 3-div section under that.

See: http://codepen.io/Paulie-D/pen/BApuz

[Kitastrophe]

I tried to only use absolute positioning on my two banners and one speech bubble image, but I couldn’t get them to sit right on the DIVs and ended up positioning everything.

I’ll try and use your recommended tutorial site as a guide and clean up my coding.

[Paulie_D]

Ahhh…that’s where the fun comes in.

More often than not what is actually needed, rather than absolute positioning is something completely different….usually **relative** positioning’or negative margins.

Here’s a quick exmaple showing both options…notice that depending in which one you use, the subsequent content might react differently.

http://codepen.io/Paulie-D/pen/xIKcE

[Author]

Posts