An EO.Web Captcha control consists of the several UI elements. Each element corresponds to a style property. You can use the corresponding style property to customize each element's appearance and layout.

Each style property can be used to float or absolute position the corresponding UI element. For example, it's typical to float the image to the left and the "Refresh" and "Audio" link button to the right. Such layout can be achieved by:

<eo:Captcha ....>
    ....
    <ImageStyle CssText="float:left;" />
    <RefreshLinkStyle CssText="margin-left:5px;" />
    <AudioLinkStyle CssText="margin-left:5px;margin-bottom:20px;" />
    ....
</eo:Captcha>

The above code:

• Floats the image to the left by applying float:left; on ImageStyle;
• Reverses 5 pixels between the image and the link buttons by applying margin-left:5px; on RefreshLinkStyle and AudioLinkStyle;
• Push the textbox below the image (instead of being floated to the right of the image) by applying margin-bottom:20px; on AudioLinkStyle;

You can also use absolute positioning in these styles to absolute position each UI element precisely. In order to use absolute positioning, it is recommended that you start a "position scope" on the Captcha control:

<eo:Captcha style="position:relative;" ...>
.....
</eo:Captcha>

Note the position:relative CSS attribute on the Captcha control. This starts a new position scope just for the contents of the Captcha control. Once a new scope is established, you can use position:absolute; to absolute position each UI element. For example, the following code position the "Refresh" and "Audio" link on top and the image right below it:

<!--
Use absolute positioning to customize Captcha layout
-->
<eo:Captcha runat="server" 
     ID="Captcha1" style="position:relative;" 
     RefreshLinkHtml="&lt;img src='refresh.gif' border='0' alt='Refresh' /&gt;"
     AudioLinkHtml="&lt;img src='audio.gif' border='0' alt='Audio' /&gt;">
    <ImageStyle CssText="border: solid 1px #c0c0c0;position:absolute; left: 0px; top: 0px;" />
    <TextBoxStyle CssText="border: solid 1px #b7d9ed;padding-left:2px;padding-right:2px;padding-top:1px;padding-bottom:1px;width:146px;position:absolute;top:58px;" />
    <RefreshLinkStyle CssText="position:absolute;left:153px;top:3px;" />
    <AudioLinkStyle CssText="position:absolute;left:153px;top:30px;" />        
    <PromptStyle CssText="position:absolute; left:155px; top: 60px;" />
    <ErrorMessageStyle CssText="position:absolute; left:155px; top: 60px; color:red;" />
</eo:Captcha>

<!-- 
Use a div with padding-top to push contents down since the
Captcha control takes no layout space
-->
<div style="padding-top:82px">
    <asp:Button runat="server" ID="Button1" Text="Submit" onclick="Button1_Click" />
</div>

Special considerations when using absolute positioning layout:

1. You should set all style properties properly. For example, if the above sample did not set PromptStyle, then the prompt message ("Enter the text in the image") would have been displayed at (0, 0) inside the Captcha control, which would overlap with the CAPTCHA image;
2. Because all contents inside the Captcha control are absolute positioned, the Captcha control takes no layout space. Thus it is necessary to use some kind of mechanism to reserve space actually being used by the Captcha control so that contents after the Captcha control would not overlap with the Captcha control. The above sample uses a DIV with padding-top CSS attribute to achieve this goal.