Causing a singular object to drift towards the right

Despite its simplicity, I have been struggling to position one of the items on the right side. Currently, I have multiple items and I am trying to get the 'Logout' button to stick to the right.

body {
  margin: 0;
  background: #222;
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
}

.container {
  width: 100%;
  margin: 0 auto;
}

header {
  background: #55d6aa;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

nav {
  float: left;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 70px;
  padding-top: 25px;
  position: relative;
}

nav a {
  color: #444;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

nav a:hover {
  color: #000;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #444;
  position: absolute;
  top: 0;
  width: 0%;
  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
}

.logout {
  margin-left: -90%;
}
<header>
  <div class="container">
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="#">Chat</a></li>
        <li><a href="#">Profile</a></li>
        <div class="logout">
          <li><a href="#">Logout</a></li>
        </div>
      </ul>
    </nav>
  </div>
</header>

The workaround solution I attempted involved creating a div named 'logout' and adding float: right; to .logout in the main.css file. Unfortunately, this did not produce the desired result and only made matters worse.

htmlcss

Answer №1

To modify the width of the nav element, simply include the property float:right;

This is what it should look like:

nav {
  float: right;
  width:100%
}

Check out the working example on Fiddle

Answer №2

Your CSS and HTML codes had some errors that prevented you from achieving the desired result. Here is an updated code snippet for you to try:

<header>
  <div class="container">
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="#">Chat</a></li>
        <li><a href="#">Profile</a></li>
        <li class="logout"><a href="#">Logout</a></li>
      </ul>
    </nav>
  </div>
</header>

body {
  margin: 0;
  background: #222;
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
}

.container {
  width: 100%;
  margin: 0 auto;
}

header {
  background: #55d6aa;
}

header::after {
  content: '';
  display: table;
  clear: both;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
}

nav li {
  display: inline-block;
}

nav a {
  color: #444;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  padding: 20px 0;
  margin: 0 30px;
  position: relative;
  display: block;
}

nav a:hover {
  color: #000;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #444;
  position: absolute;
  top: 0;
  width: 0%;
  transition: all ease-in-out 250ms;
  left: 0;
}

nav a:hover::before {
  width: 100%;
}

.logout {
  float: right;
}

Answer №3

When arranging floated elements, it's important to place them before the wrapping elements. The use of margin-left: -90% on .logout was causing interference when attempting to add float. It is recommended to remove this style. Additionally, there is no need to wrap the element in a div; you can directly assign the classname to the li. Moreover, eliminating the float:left on nav will prevent the collapse of its width, allowing it to automatically fill the window width (although adding width: 100% would be redundant but harmless).

(For cases where elements don't fit on one line due to space limitations, implementing media queries would be necessary. However, as this is beyond the scope of the current query with various potential solutions, it won't be discussed here.)

body {
  margin: 0;
  background: #222;
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
}

.container {
  width: 100%;
  margin: 0 auto;
}

header {
  background: #55d6aa;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

nav {
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 70px;
  padding-top: 25px;
  position: relative;
}

nav a {
  color: #444;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

nav a:hover {
  color: #000;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #444;
  position: absolute;
  top: 0;
  width: 0%;
  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
}

.logout {
  float: right;
}
<header>
  <div class="container">
    <nav>
      <ul>
        <li class="logout"><a href="#">Logout</a></li>

        <li><a href="#">Home</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="#">Chat</a></li>
        <li><a href="#">Profile</a></li>
      </ul>
    </nav>
  </div>
</header>

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

Using the array `$_POST` by combining multiple pieces of data into a

Is it possible to receive arrays in $_POST without multiple hidden input fields and without using ajax to submit the form? Typically, I would set up the HTML like this: <input type="hidden" name="array[]" /> <input type="hidden" name="array[]" / ...

phphtmlformsinput

Selecting specified elements in Jsoup using CSS selectors

Check out this HTML snippet: <div class="last-minute"> <span>Modulo:</span>4-3-3<p>Mandorlini is hopeful to have Juanito Gomez and Cirigliano back in action after the break. There's no need to worry about Hallfredsson who was ...

htmlcssjsoup

Steps to center the background color and text on screen:1. Determine the dimensions of

I've tried many different approaches, but I'm struggling to figure it out. In my code below, the h1 and h2 elements have a gold and black background respectively. Although I've set their width to 500px, they are stuck at the top left corner ...

htmlcss

align all items centrally and customize Excel columns based on the length of the data

Is there a way to dynamically adjust the column width based on the length of data in an Excel report using PHPexcel? Additionally, how can I center all the data in the Excel sheet? Here is the current code snippet: <?php if (!isset($_POST['send&a ...

javascriptphphtmlmysqlphpexcel

Sending an email using Angular is a straightforward process that involves utilizing the built

I need help figuring out how to code a function in Angular or TypeScript that will open Gmail when a specific email address is clicked. I've tried different methods but haven't been successful so far. ...

htmlangularemail

When is the appropriate time to utilize the style attribute in CSS?

Hey there, I'm in the process of building a website from scratch and I've hit a snag. I understand that using the style tag isn't ideal, but would it be acceptable in this scenario? Is there a more efficient approach? Let's consider t ...

htmlcssstylescoding-style

Can one retrieve the CSS/XPath from a Capybara Element?

Is it possible to extract CSS/XPath from a Capybara Element? I have attempted to use #path but it doesn't appear to be effective. Here is the link I tried: The test is being executed on Selenium Webdriver. ...

cssxpathcapybara

How can I retrieve an attribute from another model in Ember using the current handlebar in the HTML file?

I'm attempting to achieve the following: {{#if model.user.isAdmin}} <div> My name is {{model.user.name}} </div> {{/if}} within a handlebar that is being used in a controller unrelated to users: <script type="text/x-handlebars" data- ...

javascripthtmlember.jsmodel

Aligning Text at the Center in Your React Native Application

I'm facing a few issues with my visualization: Despite aligning it to the center, the text on my first button is positioned at the right end of the button. How can I move the text 'login' to the center? Currently, the 'Sign Up Her ...

cssreactjsreact-native

Attempting to pass HTML content from a Laravel controller to display in data tables

Issue Description I am trying to send HTML tags to a table using editColumn but it is not working. AddColumn works fine for adding HTML code to a column, but editColumn does not display the HTML elements as expected. My question is how can I successfully ...

phphtmllaravelyajra-datatable

The function send_filer either returns None or finishes execution without encountering a return statement

I am currently developing an application where users can download a plot.png and a file.csv, but the send_files function isn't working as expected. Below is my Python code: app = Flask(__name__) app.USE_X_SENDFILE = True @app.route('/', met ...

pythonhtmlflaskserversendfile

No links were detected in the page source

I am attempting to locate URL links within the page source of this website. http://data2.7m.cn/database/index_en.htm However, I have been unable to find any links in the page source or even after trying Ajax calls with Firebug. There are no links for cou ...

jqueryajaxhtml

What is the purpose of Firebug adding <tbody> elements to <table> tags?

While analyzing the HTML source code, I noticed that the <tbody> tag is missing. However, when inspecting the code using Firebug in the HTML tab, the <tbody> tag suddenly appears. What could be the reason behind this discrepancy? ...

htmldomfirebug

Obtain value of dropdown selection upon change

What is the best way to retrieve the selected value in a drop-down menu when the ID dynamically changes with each refresh? Is it possible to access the particular selected value even when the ID changes? <select name="status" id="dropdown_status3352815 ...

javascriptjqueryhtmlhtml-select

Is there a reason why the Chrome browser doesn't trigger a popstate event when using the back

JavaScript: $(document).ready(function() { window.history.replaceState({some JSON}, "tittle", aHref); $(window).bind("popstate", function(){ alert("hello~"); }); }); Upon the initial loading of the www.example.com page, the above JavaScript code is ex ...

javascriptjqueryhtmlgoogle-chrome

Tips for automatically closing a bootstrap modal popup when there is no data available in the dialog

Using a bootstrap model here, each card in the model has a close button. Clicking on the close button will hide or remove the card from the model popup. If there is only one card left in the popup and I want to close that last card, I also want the model p ...

javascripthtmljquerycssbootstrap-4

Attempting to align a FieldSet in the middle of the page

Having trouble aligning a field set within a div. The first two elements are centered right next to each other, but the third one is justified left and I'm struggling to center it within the div. JSP <tr> <th> <span onclick="toggleDiv ...

htmlcss

Building dynamic input forms within Angular2

In order to customize the form for each guest, I aim to prompt users to provide their name, grade, and age for every guest they wish to invite. Initially, I inquire about the number of guests they plan to have. Subsequently, I intend to present a tailored ...

htmlangularionic-framework

Display a specific element only if another element exceeds a specified height

A snippet of HTML code is given below: <span class="day-number">{{day-number}}</span> <div class="event-box"> <div class="event-container"> </div> <div class="more-events">more ...</div> </div> The .e ...

javascriptjqueryhtmlcss

Building a row of five dynamic columns using Bootstrap's responsive design

I'm looking to set up a row with 5 responsive columns that have equal padding on all sides, but I'm struggling to find the best way to do this using Bootstrap. Here's my current HTML: <div class="row five-col-row"> < ...

htmlcsstwitter-bootstrapbootstrap-4sass