AF:PanelGroupLayout not stretching to its full width

Want to stretch the contents to its full width using af:panelGroupLayout ?

Use the following code snippet to stretch the content to its full width:

<af:panelGroupLayout id="vinaypgl01" width="400px" styleClass="afStretchWidth">
<af:outputText id="vinayot01"> This line will not be wrapped, it will be in full width of the panel grid layout i.e. 400 pixels.</af:outputText>
</af:panelGroupLayout>

Use the following code snippet to arrange the content blocks horizontally:

<af:panelGroupLayout id="vinaypgl01" layout="horizontal">
<af:panelGroupLayout id="vinaypgl02" width="400px" styleClass="afStretchWidth">
<af:outputText id="vinayot01"> This is first block.</af:outputText>
</af:panelGroupLayout >
<af:panelGroupLayout id="vinaypgl03" width="400px" styleClass="afStretchWidth">
<af:outputText id="vinayot01"> This is another block.</af:outputText>
</af:panelGroupLayout>

</af:panelGroupLayout>

Use the following code snippet to arrange the content blocks vertically:

<af:panelGroupLayout id="vinaypgl01" layout="vertical">
<af:panelGroupLayout id="vinaypgl02" width="400px" styleClass="afStretchWidth">
<af:outputText id="vinayot01"> This is first block.</af:outputText>
</af:panelGroupLayout >
<af:panelGroupLayout id="vinaypgl03" width="400px" styleClass="afStretchWidth">
<af:outputText id="vinayot01"> This is another block.</af:outputText>
</af:panelGroupLayout >

</af:panelGroupLayout >