1

I have a text input field and 2 buttons on the next line within a dialog box.

How may I line up the input field in the center of the dialog and align the buttons to the right hand edge of the input field?

I have managed to achieve the results I'm after with the following code, but it feels like there must be a better way as this aligns the text input to the right also:

<style>

.container
{
    border: 1px solid #ccc;
    text-align: right;
        width: 100%;
        padding-right: 20px;
}

</style>


<div class="container">

<p><input id="selContactLists" name="selContactLists" type="text" class="textbox" id="textbox" /></p>
<input name="" type="button" value="Button"/> 
<input name="" type="button" value="Button"/> 

5
  • 4
    whathaveyoutried.com
    – Fabian
    Aug 8, 2012 at 10:41
  • wrapped the input and buttons in a div, right aligned the buttons, right aligned the input, centered the input, but either way they don't align. quitbeingsarcasticandanswer.com
    – David
    Aug 8, 2012 at 10:44
  • 2
    i'm not sarcastic and i really like to answer questions. but i won't answer, if the question is like "i want this, please code for me". if people can see, that you tried on your own, and you post some code of your attempts, the community is more likely to answer your question.
    – Fabian
    Aug 8, 2012 at 10:51
  • I didn't want, nor ask for code. The theory would suffice. Maybe you should take a break from 'answering' questions and come back with a fresh and enthusiastic approach.
    – David
    Aug 8, 2012 at 11:07
  • You'll get a better answer if you add your current HTML/CSS to your question (optionally also make a jsfiddle.net demo). This kind of question is easier to answer with code provided, trust me.
    – thirtydot
    Aug 8, 2012 at 11:12

3 Answers 3

2

CSS:

.container {
    display: inline-block;
}

input.text {
    width: 150px;
    display: block;
}

.right {
    float: right;
}

HTML:

<div class="container" >
    <input type="text" class="text" />
    <span class="right">
        <input type="button" value="button" />
        <input type="button" value="button" />
    </span>
</div>

Working example: http://jsfiddle.net/GTTFY/

0
<style>

.container
{
    margin-left:auto;
    margin-right:auto;
    width:150px;
    }

</style>


<div class="container" >

<input name="" type="text" class="textbox" id="textbox" />
<input name="" type="button" style="float:right;" value="Button"/> 
<input name="" type="button" style="float:right;" value="Button"/> 

</div>
1
  • Hi, that doesn't seem to work for me (only tried in chrome). I understand that it's centering the div that wraps the input field and then floating the buttons to the right of that div, but unless the input field fills the div the buttons don't line up at the right hand edge.
    – David
    Aug 8, 2012 at 11:10
0
<style>

.test
{
    margin-left:auto;
    margin-right:auto;

}
.test td
{
    float:right;
}
</style>

<table class="test">
    <tr>
        <td colspan=2><input name="" type="text" class="textbox" id="textbox" /></td>
    </tr>
    <tr>
        <td><input name="" type="button" value="Button"/> </td>
        <td><input name="" type="button" value="Button"/> </td>
    </tr>
</table>
1
  • Hi, thanks for the response. If possible I don't want to have to use tables.
    – David
    Aug 8, 2012 at 11:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.