I've been attempting to align a button to the right of another button. The example above illustrates what I'm trying to achieve.
I used Bootstrap to build it, which has a useful navbar feature for layout. However, despite my efforts to use right: 0 and other positioning techniques, the buttons keep ending up on different rows. I'm puzzled by this issue and haven't been able to identify the cause yet. Thank you for taking the time to help!
This is what my HTML code looks like:
<div id="navbar" class="navbar" style="position: relative; width: 93%;left: 3%;">
<div class="navbar-inner">
<div class="brand" style="padding-left: 0%;">
<a href="www.investorsfortunes.com">
<!-- <img class="img-polaroid" src="Images/logo.jpg"> -->
Investorsfortunes.com
</a>
</div>
<ul class="nav" style="text-align: center">
<li class="divider-vertical"><a href="#">Investors</a></li>
<li class="divider-vertical"><a href="#">Deals</a></li>
<li class="divider-vertical"><a href="#">Attornies</a></li>
<li class="divider-vertical"><a href="#">Appraisers</a></li>
</ul>
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<button type="submit" class="btn floatRight">Sign in</button>
</form>
<!-- SIGN-UP AREA -->
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn btn-primary floatRight" data-
toggle="modal">Sign-Up</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">x</button>
<h3 id="myModalLabel">Sign-Up</h3>
</div>
<div class="modal-body">
<form class="well span8">
<div class="row">
<div class="span3">
<label>First Name</label>
<input type="text" class="span3" placeholder="Your First Name">
<label>Last Name</label>
<input type="text" class="span3" placeholder="Your Last Name">
<label>Email Address:</label>
<input type="text" class="span3" placeholder="Your email address">
<label>Password</label>
<input type="password" id="inputPassword" placeholder="Password">
<label>Retype Password</label>
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true"">Close</button>
<button class="btn btn-primary" data-dismiss="modal">Save changes</button>
</div>
</div>