CODEWITHSUNDEEP
htmlcss
ConfusedNoob
ConfusedNoob

Reputation: 10196

HTML alignment challenge

If I have a stack of textboxes and a button, e.g.

<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<button>Right align me</button>

How can I right align the right edges of the textboxes and the button without specifying the size of everything?

Update - perhaps my question wasn't clear. Some of the answers propose right aligning everything. Which would look like this:

right aligned

But I actually want the textboxes to be left aligned, but the button to right align to the edge of those text boxes. Is there a way to do this?

Upvotes: 0

Views: 243

Answers (7)

U-DON
U-DON

Reputation: 2140

<div style="float: left;">
    <input type="text" /><br />
    <input type="text" /><br />
    <input type="text" /><br />
    <button style="float: right;">Right align me</button>
</div>
<div style="clear: both;"></div>

Wrap the elements in a div. Floating the div left will left-align it and make its size conform to the size of its contents. Floating the button right will flush the button to the right. The clear div is there in case you want elements you add after this div to be below it, not to its right side.

Upvotes: 0

Nightfirecat
Nightfirecat

Reputation: 11610

If you wrap them all in a block element (such as a <div>), you can specify text-align: right; on that <div>, and it will align everything to the right, regardless of size.

Here's an example:

<div id="container">
    <input type="text" /><br/>
    <input type="text" /><br/>
    <input type="text" /><br/>
    <button>Right align me</button>
</div>

#container{
    text-align: right;
}

Update:

Based on the changes to your question, would something like this work better?
It aligns the button to the very right of the longest input, and to the bottom. The only disadvantage is that if you have content below the box, you'll need to add some extra margin, so it doesn't overlap with the button.

<div id="container">
    <input type="text" /><br/>
    <input type="text" /><br/>
    <input type="text" /><br/>
    <button>Right align me</button>
</div>

#container{
    display: inline-block;
    position: relative;
    
    /* Add 25px margin to prevent overlap with the button */
    margin-bottom: 25px;
}

button{
    position: absolute;
        top: 100%;
        left: 100%;
    
    /* Make it look more normal-sized */
    width: 120px;
    height: 25px;
}

Upvotes: 3

soulcheck
soulcheck

Reputation: 36777

Wrap it in a div and use text-align:right and either float:left or display:inline-block on it. The first one works in ie6.

Like this:

<div style=" text-align: right; float:left;">
     <input type="text" /><br/>
     <input type="text" /><br/>
     <input type="text" /><br/>
     <button>Right align me</button>
</div>

or 

<div style=" text-align: right; display: inline:block">
     <input type="text" /><br/>
     <input type="text" /><br/>
     <input type="text" /><br/>
     <button>Right align me</button>
</div>

You can also use a good, old table, it's not recommended though.

<table style="text-align:right">
    <tr><td>
         <input type="text" /><br/>
         <input type="text" /><br/>
         <input type="text" /><br/>
         <button>Right align me</button>
    </td></tr>
</table>

Upvotes: 1

Hidalgo
Hidalgo

Reputation: 765

to accomplish what you are looking for try the following:

<table>
<tr>
<td>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td><button>Right align me</button></td>
</tr>
</table>

Upvotes: -2

Wex
Wex

Reputation: 15705

Set the widths of your input and button elements to 100%, and use a container to set their actual widths:

HTML:

<div id="container">
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <button>Right align me</button>
</div>

CSS: 

#container { width: 200px; }
input { width: 100%; }
button { width: 100%; }

Upvotes: 1

Jose Faeti
Jose Faeti

Reputation: 12304

Just float:right the elements inside the specified element, so they will be right aligned, like in this example.

Upvotes: 0

ChrisLively
ChrisLively

Reputation: 88072

Just float the inputs and buttons, while clearing the floats in the br tag.

<style>
    input { float: right; }
    br { clear:both;}
    button { float:right;}
</style>

Upvotes: 0

Related Questions