Aligning an image towards the right in css/bootstrap

Question

I have a screenshot as shown below which I am trying to replicate in HTML, CSS and JS.

The screenshot should remain the same both for mobile and desktop version.

At this moment, I am working on the three dots (as marked on the image above) aligned towards the right.

I have created a fiddle for it with HTML and CSS codes. I have created an image for the three dots. The code which I have used in order to align three dots image towards the right is:

HTML:

<div class="nav-top-searchbar">
    <form>
        <span class="fa fa-search searchicon" aria-hidden="true"></span>
        <input type="text" name="search">
        <img src="https://s9.postimg.org/d6s4xvykv/Ellipsis.png" id="ellipsis">
    </form>
</div>

CSS:

#ellipsis {
    top: -30px;
    position: relative;
    left: 1320px;
}

Problem Statement:

The problem in the fiddle is when I am seeing the web-page in the mobile version, it is creating a white space all the way towards the right. I am wondering what changes do I need to make in the above CSS code/HTML code so that I don't see any white space on the right.

Answer 1

You should do the following:

1) The #ellipsis itself

#ellipsis {
    top: 12px; // Sounds good and a bit centered [ Vertically ]
    position: absolute;
    right: 20px; // Increase or decrease it depends on your UI needs
}

Why did I change here?

1. top from negative to positive.
2. position from relative to absolute as we would give relative position to the <input> itself. Because we need to be wrapped inside it. If you are confused about relative and absolute take a quick look at this answer.
3. Instead of using left: 1320px; we used right to stick it at the right

2) The #ellipsis container / The .nav-top-searchbar

.nav-top-searchbar {
    position: relative;
}

Your code might work fine without adding this, but I highly recommend you adding this to avoid any styling issues now or even later. Some browsers might run it fine - As it works now with my without adding it - but you should consider adding the relative to the parent to keep your image inside of it.

---

Apply the changes above and let me know if you got any further questions!

Answer 2

CSS:

   #ellipsis {
         top: -30px; 
         position: absolute; 
         right:0;
   }

Answer 3

I would have advice you put the image in a div container but try this

ellipsis {

top: -30px; position: absolute ; right:0; }

Answer 4

I would float that element right with float: right;