by mockup I mean can you show us a pic of what you want this to look like with some fake content (other than abc, green div, etc.)
I’ll explain the overflowing text being displaced by the floats, but the remedy most likely is to completely redo the html, but again I don’t know without seeing some substantial content and without knowing the desired rendering.
Let’s jump down to the boxy2botbox classed div (terrible class names btw). This div has a set height and 5 child divs (as stated in the other thread, too many divs). The first 4 divs are floats, which are taken out of the document flow, but their content will displace inline boxes of elements left in the document flow. The fifth child (green box) div begins at the top left corner of the boxy2botbox, because the previous siblings were removed from document flow. Because the green box has a set width and height, its displayed as such. But the inline box within the div containing the text ‘green box’ has been displaced by the floats. If you remove the height and width of .boxy2v you’ll see that div grow to encompass its text node. The green div is actually rendered 20px down and right of the top left of its parent because of the position relative and the top and right offsets you’ve given it. I hope this helps explain why its rendering this way. I realize it doesn’t help in fixing things, but I need more information to help you.