order of buttons changes when floating right. how to fix that? - html

Question

When i float a few buttons to the right, the order of those buttons changes.
I uploaded picture so you can see what i mean.
Navbar image
this is the code i'm using.
.btn{
float: left;
padding: 1.7em;
text-align: center;
display: inline-block;
border: none;
cursor: pointer;
color: white;
}
.navbar{
float: left;
background-color: #47476b;
}
.btnff{
-webkit-transition-duration: 0.7s;
transition-delay: 0.1s;
}
.btnff:hover{
background-color: black;
}
.active{
background-color: limegreen;
}
.right{
float: right;
}
<div>
<button class="btn btnff navbar active" type="submit">Button 1</button>
<button class="btn btnff navbar" type="submit">Button 2</button>
<button class="btn btnff navbar" type="submit">Button 3</button>
<button class="btn btnff navbar" type="submit">Button 4</button>
<button class="btn btnff navbar" type="submit">Button 5</button>
<button class="btn btnff navbar" type="submit">Button 6</button>
<button class="btn btnff navbar" type="submit">Button 7</button>
<button class="btn btnff navbar right" type="submit">Button 8</button>
<button class="btn btnff navbar right" type="submit">Button 9</button>
</div>
how can i get button 9 and 8 in the correct order? and how can i make the color of the buttons stretch the whole width of the screen so i don't get the white space in between the left and right buttons?

Answer 1

You could make a container around the 2 buttons and let the container float to the right.
.btn{
float: left;
padding: 1.7em;
text-align: center;
display: inline-block;
border: none;
cursor: pointer;
color: white;
}
.navbar{
float: left;
background-color: #47476b;
}
.btnff{
-webkit-transition-duration: 0.7s;
transition-delay: 0.1s;
}
.btnff:hover{
background-color: black;
}
.active{
background-color: limegreen;
}
.float-container{
float: right;
}
<div>
<button class="btn btnff navbar active" type="submit">Button 1</button>
<button class="btn btnff navbar" type="submit">Button 2</button>
<button class="btn btnff navbar" type="submit">Button 3</button>
<button class="btn btnff navbar" type="submit">Button 4</button>
<button class="btn btnff navbar" type="submit">Button 5</button>
<button class="btn btnff navbar" type="submit">Button 6</button>
<button class="btn btnff navbar" type="submit">Button 7</button>
<div class="float-container">
<button class="btn btnff navbar" type="submit">Button 8</button>
<button class="btn btnff navbar" type="submit">Button 9</button>
</div>
</div>

Answer 2

you can use text-align and only float the one you want left aligned.
You'll have to deal with white-space. here in snippet below i use a comment to get rid of it.
.btn{
float: left;
padding: 1.7em;
text-align: center;
display: inline-block;
border: none;
cursor: pointer;
color: white;
}
.navbar{
float: left;
background-color: #47476b;
}
.btnff{
-webkit-transition-duration: 0.7s;
transition-delay: 0.1s;
}
.btnff:hover{
background-color: black;
}
.active{
background-color: limegreen;
}
.right{
float: none;
}
div {text-align:right;}
<div>
<button class="btn btnff navbar active" type="submit">Button 1</button>
<button class="btn btnff navbar" type="submit">Button 2</button>
<button class="btn btnff navbar" type="submit">Button 3</button>
<button class="btn btnff navbar" type="submit">Button 4</button>
<button class="btn btnff navbar" type="submit">Button 5</button>
<button class="btn btnff navbar" type="submit">Button 6</button>
<button class="btn btnff navbar" type="submit">Button 7</button>
<button class="btn btnff navbar right" type="submit">Button 8</button><!--
comment to kill white-space from code indentation
--><button class="btn btnff navbar right" type="submit">Button 9</button>
</div>

Answer 3

Change the order of the buttons floated right in the HTML. Add a class to the containing div and use overflow: auto so it doensn't collapse while containing floated child elements.
.buttons {
background: #000;
overflow: auto;
}
.btn{
float: left;
padding: 1.7em;
text-align: center;
display: inline-block;
border: none;
cursor: pointer;
color: white;
}
.navbar{
float: left;
background-color: #47476b;
}
.btnff{
-webkit-transition-duration: 0.7s;
transition-delay: 0.1s;
}
.btnff:hover{
background-color: black;
}
.active{
background-color: limegreen;
}
.right{
float: right;
}
<div class="buttons">
<button class="btn btnff navbar active" type="submit">Button 1</button>
<button class="btn btnff navbar" type="submit">Button 2</button>
<button class="btn btnff navbar" type="submit">Button 3</button>
<button class="btn btnff navbar" type="submit">Button 4</button>
<button class="btn btnff navbar" type="submit">Button 5</button>
<button class="btn btnff navbar" type="submit">Button 6</button>
<button class="btn btnff navbar" type="submit">Button 7</button>
<button class="btn btnff navbar right" type="submit">Button 9</button>
<button class="btn btnff navbar right" type="submit">Button 8</button>
</div>

Answer 4

This can be done very effectively with flexbox, without floats:
Define the DIV container as flex container (display: flex), erase float: right from buttons 8 and 9 and assign margin-left: auto to button 8 (this moves everything from there on to the right end). In the code below I did that via the added classes .x and .y
.btn{
float: left;
padding: 1.7em;
text-align: center;
display: inline-block;
border: none;
cursor: pointer;
color: white;
}
.navbar{
float: left;
background-color: #47476b;
}
.btnff{
-webkit-transition-duration: 0.7s;
transition-delay: 0.1s;
}
.btnff:hover{
background-color: black;
}
.active{
background-color: limegreen;
}
.x {
display: flex;
}
.y {
margin-left: auto;
}
<div class='x'>
<button class="btn btnff navbar active" type="submit">Button 1</button>
<button class="btn btnff navbar" type="submit">Button 2</button>
<button class="btn btnff navbar" type="submit">Button 3</button>
<button class="btn btnff navbar" type="submit">Button 4</button>
<button class="btn btnff navbar" type="submit">Button 5</button>
<button class="btn btnff navbar" type="submit">Button 6</button>
<button class="btn btnff navbar" type="submit">Button 7</button>
<button class="btn btnff navbar y" type="submit">Button 8</button>
<button class="btn btnff navbar" type="submit">Button 9</button>
</div>