Overlapping DIVS issue

please look at this layout in a browser at various screen resolutions.


First of all, the layout (visually) looks like I want it, but it isn't the correct way to get the result I want.

There are several divs being used because the site must be dynamic and responsive to various viewing devices (computer, mobile, tablet)

The top div (black bar across top) is positioned right.
The next div is the menu that appears on the right side (tan menu words)
The next div is the primary header with the logo on the left
The next div is the left side with stripes needs to stay positioned just below the logo div, which it does.

The issue I'm having is the two divs nested on the right side.

The only way I can get that to overlap the logo div is to use a negative TOP margin as a percentage (to ensure responsive layout for various screen sizes) and it works ok on my desktop browsers (Chrome, FF, IE) but blows up in my mobile and tablet layouts.

I've tried variations of absolute and relative positions on every div on the page to see if I could get the layout to work without using the negative TOP value, but nothing works.

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Change it to
margin-top: -8%; // tweak as necessary

instead of just top.
If I am understanding your problem.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
That code is an absolute mess.  

The HTML validator throws over a hundred error and over 60 warnings.

You have an XHTML doctype but some of the coding is on valid for HTML4

There are tagging errors.

You might find yet another hack to solve your problem but the page is unstable and will just keep having problems until you clean up the code, and the more you hack away the harder it will be to clean up.

day6Author Commented:
fixed the issue in the portrait version of the mobile browser and looks good in the landscape mode in the mobile browser too
day6Author Commented:

Instead of being a policeman about HTML compliance issues, why not actually consider the CSS question I had and answer it. I'll never understand guys like you who spend their time responding on posts with pointing out non-compliance code instead of addressing the question.

Unless you're working full-time for a Fortune 500 company as a web-developer, we small guys have to do what we have to do to make stuff work in the ever-changing world of browser updates and various mobile/tablet platforms. I have never had time to keep up with the non-stop evolution of compliance and the last time I audited major portal sites like Yahoo and a few other BIG BOYS... YES, their sites also rang up a bunch of compliance errors.

So instead of approaching solving questions on here with a simple "CLEAN UP YOUR CODE" reply that didn't even consider my question (like the guy who actually responded with a solution that works), just avoid typing anything at all.

Yes, you annoyed me.

You're completely welcome to spend 18 hours updating my code so it works on every platform if you like. Be my guest.

Some people prefer to find excuses for poor work, and spend there time digging through junk to find the next hack they need .  Some of us prefer to do things right.  Given the thousand of question I have answered I guess my teaching approach works.

I'm glad you got an "answer".  Someday when you decide it is time for a "solution", we'll be here to help you up to the next level.

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.