A way to reduce the number of pixels and elements with a width of 100%?

Question

I have a simple search form:

<div class="search"> <input placeholder="Search term here"> <button> Go </button> </div> 

Naturally, the button goes to the right of the entrance. However, on mobile devices, I want to reverse this - so that the button is on the left.

For this, I created:

 .search { width: 100%; } input { float: right; width: 100%; height: 30px; } button { float: left; width: 30px; height: 30px; } 

https://jsfiddle.net/ufLoj5se/5/

But of course, this presses a button on the second line.

Is there a way to nullify the 30x width of the button from the input so that the button sits tight to the left?

Answer 1

Instead of juggling around a float, you can use flex-box.

You can position your elements anywhere, more precisely depending on the screen resolution.

Here is what you could do.

 .search { width: 100%; display: flex; flex-direction: row; align-items: center; } input { width: 100%; height: 30px; order: 1; } button { width: 30px; height: 30px; order: 2; } @media only screen and (max-width: 480px) { button { order: 1; } input { order: 2; } } 

 <div class="search"> <input placeholder="Search term here"> <button> Go </button> </div> 

Answer 2

use the calc() function as follows:

 .search { width: 100%; } input { float: right; width: calc(100% - 40px); height: 30px; } button { float: left; width: 30px; height: 30px; } 

Answer 3

 .search { width: 100%; } input { float: right; width: 87vw; height: 25px; padding: 1px 5px; } button { float: left; width: 10vw; height: 30px; } 

You can use% instead of vw, and it should work the same.