Hey, Im having a problem positioning some of my divs. See attached gif, What is the best way to

position/float divs 4,5 and 6?

I think rearranging your divs a little would make things easier (see attached image). I also think positioning is a little easier to grasp at first than floats though others may disagree. Floats can sometimes do unexpected things since the order of your html will play a part in where they appear.

For div 1 you could use what you have and change the width to 100%. You don't need to do anything for the white strip other than to leave a little space between div 1 and everything below. So if div 1 has a height of 128px maybe div 2 would have a position of top: 133px.

div 2 would just need a height (you may also need to put a non-breaking space into it since it will be otherwise empty) and give it a background-color and again a width of 100% I'm thinking div 2 would start at the top of the dark gray above the nav bar and extend down to the top of the image with the curve and the diagonal so the background-color would be the darker gray. div 3 (the curved image for the navigation bar) would go inside div 2 and have the background-image with repeat-x and again a 100% width. Because of the repeating part you only need to make the image 1 px wide. Adding a margin-top to div 3 should push it down a little inside of div 2 and letting the background color for div 2 show through.

Now it starts to get a little trickier below this. My initial thought (and some of this is guesswork since I didn't actually code anything) would be to have div 4 stretch from the top of where the image will be to the bottom of the image. I would give it a height and the gray background color that extends to the right. This div will also have a width of 100%. I think you can mimic the shadow at the top with a border, but if not you'll need to add a 1px wide image of the shadow and maybe a few pixels of the solid gray which would be in it's own div with the repeat-x and a margin-left to position it. I would leave the width alone since giving it a width of 100% will most likely cause to to continue much further to the right than you'd want and cause a horizontal scrollbar to appear.

divs 5, 6, 7, and 8 would be inside of div 4 with appropiate background colors. These divs will need a width to keep them from extending past the right edge of the image. The divs also need to have a z-index greater than whatever is set for div 4 (leaving out the z-index of div 4 will default it to 0. div 9 would be a little strip of the light gray matching the gray in div 8. This div could have a width of 100%

The image would then get positioned where you want and it would need to have a z-index greater than those set for divs 5-8 (divs 5-8 can all have the same z-index since they won't be overlapping). So the image sits on top of divs 5-8 which sit on top of div 4

Ok I think that covers all the background colors. (I hope you're still with me. I'm a little confused myself at this point) The various pieces of text could then be placed in their own divs and positioned accordingly each with a z-index greater than the various divs they sit above. Just give them all a z-index greater than for the image and it should work. You really don't need to place the text in different divs. You can alternately add an id to each piece of text and position each p#id. And only the text that will overlap the image needs to be in separate divs or p#id's. The text in div 1 and the text on the left sides of divs 5-8 could sit inside each of those divs repectively

Now that I've written this out it seems a bit overly complicated to me. Everything below div 2 and 3 anyway. I'm sure there's an easier way to do it, but that was my first instinct and I went with it. Hopefully I've at least helped with the top part of the page and maybe someone else has a suggestion for the bottom or in a day or two with a second look I can come up with something better.