Page 1 of 1

Align left and right

Posted: Mon Dec 11, 2006 10:28 am
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.

Posted: Mon Dec 11, 2006 10:35 am
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>

Posted: Mon Dec 11, 2006 10:46 am
by CoderGoblin

Posted: Mon Dec 11, 2006 12:14 pm
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

Posted: Mon Dec 11, 2006 12:17 pm
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>

Posted: Mon Dec 11, 2006 12:25 pm
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.