Align element under other element through css

Question

I have a really simple search form with the following

• Label ("Search")
• Textbox (fixed width)
• Submit button
• "Advanced" link

Label, textbox and submit are all on one horizontal line and centered. Now I would like my advanced link to be under the submit button.

Any ideas?

Answer 1

If I understand the question you want:

              Search [xxxxxxxxxxxxxxxx] [Submit]
                                        Advanced

You'll have to add some more elements in to do that:

<div style="width: 300px; margin: auto; text-align: center;">
    Search [xxxxxxxxxxxxxxx] [Submit]
    <div style="text-align: right">Advanced</div>
</div>

Answer 2

<style type="text/css">
    #searchpanel
    {
        width: <displaywidth of controls>px;
        text-align: center;
    }

    #button
    {
        text-align: right;
    }
</style>
<div ="searchpanel">
    <label for="textbox">Search</label><input type="text" id="textbox" />
    <input type="submit" value="Search" />
</div>
<div id="button">
    <a href="#">Advanced</a>
</div>

Hope this helps.