Align left and right

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Align left and right

Post by shiznatix »

I am trying to have on the same line a submit button aligned to the left and then one to the right. It is not working right now as the only way I can think to do it just centers all of them. Heres my code:

Code: Select all

<div style="text-align: left; display: inline;">
    <input type="submit" value="'MORE" onClick="addRowToTable();" class="submit-button" />
    <input type="submit" value="LESS" onClick="removeRowFromTable();" class="submit-button" />
</div>

<div style="text-align: right; display: inline;">
    <input type="submit" name="Action[Add]" value="UPLOAD" class="submit-button" />
</div>
like I said, that just centers them all.
User avatar
Obadiah
Forum Regular
Posts: 580
Joined: Mon Jul 31, 2006 9:13 am
Location: Ashland, KY
Contact:

Post by Obadiah »

try this

Code: Select all

<div style="float: left; display: inline;"> 
    <input type="submit" value="'MORE" onClick="addRowToTable();" 

class="submit-button" /> 
    <input type="submit" value="LESS" onClick="removeRowFromTable();" 

class="submit-button" /> 
</div> 

<div style="float: right; display: inline;"> 
    <input type="submit" name="Action[Add]" value="UPLOAD" 

class="submit-button" /> 
</div>
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

User avatar
neel_basu
Forum Contributor
Posts: 454
Joined: Wed Dec 06, 2006 9:33 am
Location: Picnic Garden, Kolkata, India

Post by neel_basu »

Here Is The Code
=============

Code: Select all

<div style="position: absolute; width: 29px; height: 10px; z-index: 1; left: 644px; top: 24px" id="upload">
    <input type="submit" name="Action[Add]" value="UPLOAD" class="submit-button" /></div>
	<div style="position: absolute; width: 2px; height: 14px; z-index: 1; left: 268px; top: 30px" id="less">
    <input type="submit" value="LESS" onClick="removeRowFromTable();" class="submit-button" /></div>
	<div style="position: absolute; width: 10px; height: 7px; z-index: 1; left: 39px; top: 28px" id="more">
    <input type="submit" value="'MORE" onClick="addRowToTable();" class="submit-button" /></div>
You Can Align Them Separately With 100% Freedom.
Just Change The

left:
top:

Properties According To Your Need
User avatar
neel_basu
Forum Contributor
Posts: 454
Joined: Wed Dec 06, 2006 9:33 am
Location: Picnic Garden, Kolkata, India

Post by neel_basu »

As For Positioning Purpouse css Is Not Nedded You Can Remove The class Attribute

Code: Select all

<div style="position: absolute; width: 29px; height: 10px; z-index: 1; left: 644px; top: 24px" id="upload">
    <input type="submit" name="Action[Add]" value="UPLOAD" /></div>
	<div style="position: absolute; width: 2px; height: 14px; z-index: 1; left: 268px; top: 30px" id="less">
    <input type="submit" value="LESS" onClick="removeRowFromTable();" /></div>
	<div style="position: absolute; width: 10px; height: 7px; z-index: 1; left: 39px; top: 28px" id="more">
    <input type="submit" value="'MORE" onClick="addRowToTable();" /></div>
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

In my opinion the solution on communitymx is a bit cleaner, not having to specify widths and heights on everything. If you specify those you loose the flexibility of being able to scale the (text)size.
Post Reply