using constraint layout and percentage layout together flex

Question

Hi, I'm trying to use percentage based layout along with contraint based layout to achieve the following layout

http://imgur.com/rgoBe.jpg

I have 3 canvas set in my app with the correct percentages but I setting things like top=10 left = 10 to create "border margins" has no effect.

How can I fix this?

EDIT

    <containers:GradientVBox width="820"
                             height="625"
                             id="vbox">
        <containers:GradientCanvas width="100%"
                     height="25%"
                     id="wave"
                     click="collapseWaveform(event)"
                     buttonMode="true" cornerRadiusBottomLeft="16"
                             cornerRadiusBottomRight="16"
                             cornerRadiusTopLeft="8"
                             cornerRadiusTopRight="8"
                             gradientFrom="0xffffff"
                             gradientTo="0xf5f5f5" top="10" />
        <mx:HBox width="100%"
                 height="75%"
                 id="myhbox"
                 paddingTop="0">
            <containers:GradientCanvas width="50%"
                          height="100%"
                          alpha="1.0"
                          id="left"
                          buttonMode="true" cornerRadiusBottomRight="8"
                             cornerRadiusTopLeft="8"
                             cornerRadiusTopRight="8"
                             gradientFrom="0xffffff"
                             gradientTo="0xf5f5f5" left="10">
                <content:Content width="95%"
                                 height="95%"
                                 id="content"
                                 verticalCenter="0"
                                 horizontalCenter="1"
                                 horizontalScrollPolicy="off"
                                 resize="resizeIt()">
                    <mx:ViewStack id="contentviewstack"
                                  width="100%"
                                  height="100%">

                        <containers:ContentContainerSoundCloud id="soundcloudcontent"
                                                               width="100%"
                                                               height="100%"
                                                               cornerRadius="5"
                                                               borderThickness="0"
                                                               borderStyle="solid"/>
                        <containers:ContentContainerLoopMasters id="loopmasterscontainer"
                                                                cornerRadius="5"
                                                                borderThickness="0"/>
                        <containers:ContentContainerClips id="clipscontents"
                                                          cornerRadius="5"
                                                          borderThickness="0"/>

                    </mx:ViewStack>
                </content:Content>
            </containers:GradientCanvas>
            <containers:GradientCanvas width="50%"
                           height="100%"
                           id="right"
                           buttonMode="true" cornerRadiusBottomRight="8"
                             cornerRadiusTopLeft="8"
                             cornerRadiusTopRight="8"
                             gradientFrom="0xffffff"
                             gradientTo="0xf5f5f5" right="10" left="10"/>
        </mx:HBox>

    </containers:GradientVBox>


</mx:Application>

Answer 1

To add the gap at the top, set top="10" on vbox, not wave.

To get the 10 pixel gap in the middle, set gap="10" on vbox.

To get the 10 pixel gap on the right, set right="10" on vbox.

That should create the layout you're looking for.