Inline block - align to right? - html

Question

I'm trying to get 'ADD' and the search box to sit next to each other, side by side and align them right.
I've checked out other answers and I have implemented an inline-block solution, they sit side by side (but for some reason it's not working on the fiddle). How can I align the elements to the right of their parent?
<div class="span6">
<h2 class="pull-left">TITLE</h2>
</div>
<nav class="span6">
<form action="/gateway" method="get">
<input name="search" size="10" type="search" placeholder="Search" results=5>
</form>
<a class="btn" href="/add">ADD</a>
</nav>
Fiddle

Answer 1

JSFiddle does not use SCSS by default. Expand the Languages menu on the left and choose "SCSS" instead of "CSS". This should result in the elements aligning side-by-side.
To align the nav to the right, make both span6's 50% width and float/text-align the nav right.
.span6{
float: left;
width: 50%;
}
nav{
float: right;
text-align: right;
...
}
Fiddle

Answer 2

Erik Gillepsie is right. Here is your Fiddle in CSS structure and with the correct HTML input tag: http://jsfiddle.net/6MY8g/
<input name="search" size="10" type="search" placeholder="Search" results=5 />
Edit: to align right (only the second div), add a class "right" to your div and make it float right.

Answer 3

Try This : just replace your code with this
<div class="span6">
<h2 class="pull-left">ARTICLE MANAGER</h2>
</div>
<nav class="span6">
<form action="/gateway" method="get">
<input name="search" size="10" type="search" placeholder="Search" results=5>
<a class="btn" href="/add">ADD</a>
</form>
</nav>

Answer 4

So, if i'm understanding you correctly you want the title "Article Manager" and the search box and the ADD link to all be on the same line. AND, you want the "Article Manager" to be on the left, and the search and add group aligned to the right, correct?
Create a container for your row, and put everything in it, and give it 100% width so it spans the entire width of the page. Then float the title to the left, and float the search box group to the right. Done and done.
<div class="header-container">
<div class="span6 title">
<h2 class="pull-left">ARTICLE MANAGER</h2>
</div>
<nav class="span6 search">
<form action="/gateway" method="get">
<input name="search" size="10" type="search" placeholder="Search" results=5>
</form>
<a class="btn" href="/add">ADD</a>
</nav>
</div>
http://jsfiddle.net/9p2VM/7/

Answer 5

Your CSS is not well-formed in the fiddle. Without changing a line of code in the fiddle ie. by just indenting the CSS properly, your code works fine.
This is how your CSS is:
.span6{
float: left;
}
nav{
white-space: nowrap;
.btn{
display: inline-block;
}
form{
margin: 0;
padding: 0;
display: inline-block;
input[type=search] {
margin: 15px 0 0 0;
}
}
}
Change it to:
.span6 {
float: left;
}
nav.span6 {
white-space: nowrap;
float:right;
}
.btn {
display: inline-block;
}
form {
margin: 0;
padding: 0;
display: inline-block;
}
input[type=search] {
margin: 15px 0 0 0;
}
And it works fine. See here->http://jsfiddle.net/9p2VM/8/
Hope this helps!!!