DIVs overlapping with browser resize. Absolute Positioning problem?
# July 12, 2013 at 3:46 pm
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.
I updated the Pen file to include my HTML, and here is a screenshot of what the site looks like.
I was using position:absolute to put those banners on top of my DIVs, any other method I used didn’t quite work.# July 12, 2013 at 4:06 pm
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.
Do you have an image of what the design is supposed to look like…we could offer some much simpler layout options?# July 12, 2013 at 4:17 pm
Here is what I have right now:
That top navigation may or may not be staying, I was just using it for practice from a tutorial site.# July 12, 2013 at 5:04 pm
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.
You must be logged in to reply to this topic.