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.