Docking/Anchoring controls

Question

I have a user control (which for the purposes of this post is just a container), and several nested user controls. I want to lay out the child controls inside the container in a similar way to the following picture:

http://mi6.nu/docking.jpg

I've tried different combinations of Anchor and Dock properties as well as using a Flow Layout Panel, but I can't get it to work.

The two things I know are:
1) The location of each child control on the Y-axis
2) The height of the control

I need some way to assign these controls a combination of properties and have them stack up as shown in the picture. Full width child controls should float to the left, and if there's more than one child control at a Y location (eg: 3 and 4), the available space should be split.

I managed to get it sort of working, but items were overlapping.

Bill · Answer

Thanks Mike. The problem is I don't know how many components will occupy the same Y-location. It could be one or more than one so I don't think a fixed % width would work.

Mike Hankey · Answer

Bill I don't know if this will help you any but I would do it using percentages kinda like a web page layout. Item 1: 50% float/anchor left Item 2: 50% float/anchor right Item 3/4: 25% each float/anchor right Item 5: 50% float/anchor right Mike