Confused by tile layout with floats. So close, yet so far...

Good morning. Our designers have come up with a tile layout for a page we are working on. As the web guy, I'm tasked with making it functional. I'm having a hard time wrapping my brain around all the floats involved, and I've gotten all but one tile into place. But for the life of me, I can't figure out how to get it where it needs to be, so I thought I'd come here for a fresh pair of eyes.

http://jsfiddle.net/jTvWQ/

div5 (red) is the offender. I have tucked it down at the bottom for now, since it was messing up the rest of the layout. It goes in the empty white space to the right of the orange div6, and under the teal div4.

I can make it work if I swap div4 & div5 with div6, as shown here: http://jsfiddle.net/8b6Jx/, but any of you who have worked with designers before know that they are pressuring me to stick to their original design.

Thoughts?

What about having two containing divs for the left and right of the block of tiles, which would then make it much easier to position / float each box within each of the containing divs (sort of like 2 columns)?

Ah, of course. I've done this very thing lots with regular layouts, but this is my first tile layout, and I just never thought to apply this.

I'll give that a try here.

Of course that wouldn't work if you didn't have that type of tile layout So maybe another option is to position each tile relatively (just throwing another thought into the pot).

Adding an additional <div> as a wrapper around div4 and div5 is a much more robust solution. Relative positioning is really only good for making small adjustments in position (or sometimes to swap the position of two columns).

Totally agree - I very rarely use relative positioning for anything to be honest

Ah, your comment is a good tip as well. This particular design allowed me to break the layout into two columns, so that's what I did based on the suggestion above. But your suggestion of simply adding a wrapper div around the two offending divs would have worked brilliantly as well, especially if my layout did not permit such a clean column split down the middle.

I wanted to make sure I highlighted and affirmed your response for others who may stumble upon this thread. Thanks!