What is the best way to position a button on the right side of a div element?

**Is there a way to position a button on the top right with white space on the left side? **

<div class="newsletter">
  <button class="goup">GO UP</button>  *How can I put this btn to the right with full white space??*
  <div class="left-side">
    <a href="">Shop</a>
    <a href="">About</a>
    <a href="">Support</a>
    <a href="">COVID-19 Info</a>
    <a href="">Order Status</a>
    <a href="">Corporate Sales</a>
  </div>

         
    //CSS 
   .newsletter {
    position: relative;
    overflow: hidden;
    background-color: #f9f9f9;
  }

  .goup {
    width: 81px;
    height: 81px;
    border: none;
    padding: 25px 30px;
    font-size: 16px;
    font-weight: 700;
    background-color: #000;
    color: #fff;
    display: flex;
    float: right;
    justify-content: right;
  }

  .left-side {
    position: relative;
  }

How can I align this button to the right with ample white space?

Similar to This Example

htmlcssbuttoncss-floatcss-position

Answer №1

One issue with using float: right is that while it moves the element to the right, it doesn't create space on its left side as desired.

This code snippet tackles this problem by employing justify-content: right to ensure that the content is centered within the element.

There are various methods to position an element on the right side. This particular snippet utilizes a straightforward approach that doesn't necessitate altering other elements. It accomplishes this by shifting the element 100% to the left and then bringing it back by the same distance of its own width.

.newsletter {
  position: relative;
  overflow: hidden;
  background-color: #f9f9f9;
}

.goup {
  width: 81px;
  height: 81px;
  border: none;
  padding: 25px 30px;
  font-size: 16px;
  font-weight: 700;
  background-color: #000;
  color: #fff;
  display: flex;
  position: relative;
  left: 100%;
  transform: translateX(-100%);
}
<div class="newsletter">
  <button class="goup">GO UP</button>
  <!--How can I put this btn to the right with full white space??-->
  <div class="left-side">
    <a href="">Shop</a>
    <a href="">About</a>
    <a href="">Support</a>
    <a href="">COVID-19 Info</a>
    <a href="">Order Status</a>
    <a href="">Corporate Sales</a>
  </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on emphasizing a div when the page's validity is not true

Is there a way to highlight a specific div when the page.isvalid=false? I can display the error message on page load, but struggling to highlight the required control. I have a JavaScript function that applies an error class to the div, which works fine w ...

javascriptjquerycss

Updating the DOM after scrolling using jQuery

jQuery hover functionality is not working correctly after scrolling. $(document).ready(function() { $('img').hover(function(){ alert('hello'); },function(){ alert('hello not'); }); }); When hoveri ...

javascriptjqueryhtml

Identifying identical web elements using Python Selenium through related attributes

Having attempted to solve this problem for the third time, I find myself unable to come to a final solution on my own. I would greatly appreciate it if someone could offer their insights on the issue at hand. Let's consider the following HTML structu ...

pythonhtmlpython-3.xseleniumxpath

Issue an alert and refresh the webpage when a file extension upload script is detected

Here is the JavaScript code I'm using to restrict the file type extension during uploads: function TestFileType( fileName, fileTypes ) { if (!fileName) return; dots = fileName.split(".") //get the part AFTER the LAST period. fileType = "." + dots[do ...

javascripthtmluploadreload

How can users change the displayed Twitch channel?

My coding skills aren't the greatest, especially when it comes to something like this. I've tried searching for a solution with no luck, so I apologize if this is too basic or impossible. I have a simple page that loads up Twitch with a predefin ...

javascripthtmltwitch

setTimeout executes twice, even if it is cleared beforehand

I have a collection of images stored in the img/ directory named 1-13.jpg. My goal is to iterate through these images using a loop. The #next_container element is designed to pause the loop if it has already started, change the src attribute to the next im ...

javascripthtmlsettimeout

The PHP/MySQLi registration form is displaying a blank white page without any visible output or error messages

Hey everyone, I'm currently working on a simple registration form in PHP and no matter how many times I try to run it, all I get is a blank white page. There are no errors or outputs, just pure emptiness. I was hoping someone could shed some light on ...

phphtmlmysqlformsmysqli

Replace Choose File with Image Upload

Instead of the standard "choose file" option, I want the image browser to function like the choose file button. The code I'm using doesn't seem to be working properly. print ("<tr><td align='right' style='font-weight ...

phphtmlcss

Efficient creation of a user-friendly interface application designed to retrieve data from a nearby server

The Challenge I am faced with the task of creating a simple GUI application that can either be run on a local Ubuntu 14 server or locally while still being able to access data from the server for multiple users to make changes to a basic array data file. ...

pythonhtmluser-interfaceserverwysiwyg

Is it possible for Compass to combine .css files together?

Is there a way for Compass to combine .css files without the need for a third party tool after compiling the .scss files? I've searched online and here but haven't found any information yet. I thought maybe the config.rb file would have an option ...

csssasscompass-sass

Ways to identify if a resize event was caused by the soft keyboard in a mobile browser

Many have debated the soft keyboard, but I am still searching for a suitable solution to my issue. I currently have a resize function like: $(window).resize(function() { ///do stuff }); My goal is to execute the 'stuff' in that function on ...

javascriptjqueryhtmlmobilebrowser

Execute Javascript after modification of the DOM

I have developed two custom directives known as app-content and app-content-item. These directives are intended to be utilized in upcoming projects to provide a basic structure with simple styling. They will be incorporated into a module and should be nest ...

javascripthtmlangularjs

Unusual layout issues arise when combining images and text

Check out this jsFiddle My goal is to display images and text side by side in a horizontal layout. The text sections are using the jQuery Cycle Lite Plugin to cycle through a list of words. However, when you view the provided jsFiddle link, you'll no ...

jqueryhtml

What could be causing the sporadic functionality of my jQuery image resizing code?

Seeking help for an issue I am facing with my jQuery code. I have been trying to scale a group of images proportionally within an image carousel using jCarousel Lite plugin. However, the resizing code seems to work randomly and I can't figure out why. ...

javascriptjquerycssjcarousellite

The Bootstrap Input-Group with Spinner displays an unusual spinning shape that resembles the letter D

I am encountering an issue with a unique form that sends each line of input as a separate request upon submission. I am looking to add a spinner at the end of each line, but I am facing a problem where instead of a circular spinner, I am getting a spinning ...

htmlcssbootstrap-5

tips on sending multiple data- id in a modal window

Let's say I have multiple order IDs $order_id='12345566778'; $prod_id='126778899'; $sell_id='373462562363'; When I select a particular order ID, I want to pass it to a PHP variable located in the modal body of a popup. ...

javascriptphpjqueryhtmlajax

Discovering more about this topic

Looking for a way to create an expandable box that enlarges when "read more" is clicked, revealing text below it. And also looking to add a button that closes the expanded text back up. Experimented with the toggletext JavaScript command, as found on this ...

javascriptcsstextspry

Automatically submit upon selecting an option

Encountering some difficulties with the code provided below. Purpose of this code I have multiple list items (shown here is just a snippet) made up of select elements, options, and one submit input field. When an option is chosen, the user can click on ...

javascripthtmljquery

Eliminate unnecessary spaces in the input field located below the provided text

In the html code, I have an input field that looks like this: https://i.sstatic.net/DsD4y.png This is the CSS for the input fields: .form-control-1 { display: block; margin: 0 auto; width: 30%; height: 50px; padding: 6px 12px; font-size: 18p ...

htmlcss

Submitting information via jQuery

https://i.stack.imgur.com/VU5LT.jpg Currently, I am working on integrating an event planner into my HTML form. However, I am facing difficulty in transferring the data ("meetup", "startEvent", "break") from HTML to my database. Using jQuery, I was able to ...

javascriptjqueryhtml