What could be causing the login and signup sections to not align to the right of the screen when using float?

I'm struggling to align my login and sign-up buttons on the right side of the screen. I attempted to adjust their left padding but encountered inconsistencies in their positioning when the screen size changes. I also tried using float: right, but it didn't move them completely to the desired location.

For reference, here is my HTML code: https://pastebin.com/7kAS3Ln5

and here is my CSS code: https://pastebin.com/ffDLJd7j

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 70px;
    padding: 0 20px;
    background-color: white;
    top: 0;
    left: 0;
}
(topnav styling rules)
(login and sign up button styles)

/* The header section of the website */
<header>
    <!-- Top navigation bar -->
    <div class="topnav" id="myTopnav">
        <img src="fb-helmet.png" alt="Logo" class="helmet-logo">
        <div id="teams-btn">
            <button class="nav-btn"><a href="#Teams">Teams</a></button>
        </div>
        (dropdown menu for seasons)
        <div id="login-btn">
            <button class="nav-btn"><a href="#Login">Log In</a></button>
        </div>
        <div id="signUp-btn">
            <button class="nav-btn"><a href="#signup">Sign Up</a></button>
        </div>
    </div>
</header>

htmlcss

Answer №1

If you want to avoid using float, you can leverage the flex container for those items by simply applying margin-left. The following adjustments will provide the desired outcome:

#login-btn{
    margin-left: auto;
}

#signUp-btn{
    margin-right: 20px;
}


.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 70px;
    padding: 0 20px;
    background-color: white;
    top: 0;
    left: 0;
}
.topnav{
    width: 100%;
    height: calc(100vh / 10);
    background-color: #2B78E4;
    display: flex;
    align-items: center;
    /*justify-content: space-between;*/
}
.topnav a{
    text-decoration: none;
    color: black;
    font-family: "Helvetica", sans-serif;
}
.helmet-logo {
    width: 70px;
    height: 70px;


}
/* Dropdown Button */
.dropbtn {
    background-color: #fff1f1;
    color: Black;
    padding: 8px 16px;


}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    padding: 8px 16px;
    font-style: inherit;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #f6f6f6;
}
.nav-btn{
    background-color: #fff1f1;
    color: Black;
    padding: 8px 16px;
}
#login-btn{
    position: relative;
    display: inline-block;
    float: right;
}
#signUp-btn{
    position: relative;
    display: inline-block;
    float: right;;
    padding-left: 20px;
}

#login-btn, #signUp-btn {
    /* float: right; */
}

#login-btn{
    margin-left: auto;
}

#signUp-btn{
    margin-right: 20px;
}

#teams-btn{
    position: relative;
    padding-left: 20px;
}
<header>
    <div class="topnav" id="myTopnav">
        <img src="fb-helmet.png" alt="Logo" class = "helmet-logo">
        <div id ="teams-btn">

           <button class = "nav-btn" ><a href="#Teams">Teams</a></button>

        </div>
        <div class="dropdown">
            <button class="dropbtn">Seasons
                <i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-content">
                <a href="www.collegefbarchive.com/seasons/2022">2022</a>
                <a href="www.collegefbarchive.com/seasons/2021">2021</a>
                <a href="www.collegefbarchive.com/seasons/2020">2020</a>
            </div>
        </div>

        <div id ="login-btn">
            <button class = "nav-btn" ><a href="#Login">Log In</a></button>
        </div>

        <div id ="signUp-btn">
        <button class = "nav-btn" ><a href ="#signup">Sign Up</a></button>
        </div>
    </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

Updating HTML input fields via AJAXIncorporating AJAX

Let's take a look at our database: ID Name Price 1 product1 200 2 product2 300 3 product3 400 Now, onto my form: <form action="test.php" method="post" /> <input type="text" name="search" id="search" placeholder="enter ...

phpjqueryhtmlmysqlajax

Successfully retrieves the appropriate response, however the MySQL database fails to update when using PHP

I'm currently in the process of developing a straightforward registration form. I have a file dedicated to connecting to the database conn.php <?php $db_name = "bp_reader"; $mysql_username = "root"; $mysql_password = ""; $server_name = "local ...

phphtmlmysqlphpmyadmin

Generating HTML content using Node.js

I am completely new to the MEAN-stack and have been trying to develop an application on openshift. However, I am facing difficulties in rendering a new page. Despite my efforts to search for solutions online, I keep encountering this error that I can&apos ...

javascripthtmlnode.jsexpressmean

Prevent the onClick function of the outer div from being triggered by clicking on the inner div

Similar Question: Stop parent container click event from firing when hyperlink clicked My issue is <div onClick="someJScode();"> ... <div></div> ... </div> I need to prevent someJScode() from executing when the inner di ...

javascripthtmlonclick

Seeking clarification on the distinction between using an input of type button versus an input of type submit when triggering a jQuery form submission

This particular code is designed to execute the following actions upon being clicked: Submit the form Disable the button in order to prevent double clicks Add a spinner to the button to indicate to the user that something is happening If the form is inva ...

javascripthtmljquery

Selectors within 'not' in document.querySelectorAll are failing to function as expected

I've been attempting to find a way to replace the jQuery .not() function with native JavaScript, but so far my attempts using document.querySelectorAll have not been successful. Here is what I am trying to achieve - converting this jQuery selector in ...

javascripthtmlcsscss-selectors

What is the proper application of counter-reset when utilizing CSS counters to automatically number headings?

In my quest to automatically number headings with multiple levels of hierarchy in an HTML document using CSS, I have encountered various examples online that heavily rely on counter-reset. However, despite testing it in different configurations, I haven&ap ...

htmlcsscss-counter

The HTML button is not triggering the event in the designated graph container, but instead, it is triggering a different graph in High

I am facing an issue with two graphs displayed in separate container divs (container1 and container2) along with two sets of buttons. The problem is that both sets of buttons are currently only triggering changes in graph 2, even when clicking the buttons ...

javascriptjqueryhtmlhighcharts

Is it possible to deactivate an anchor tag based on the result of a conditional statement that returns a string?

I've created an anchor tag (not a button) with text that redirects me to another page <StyledTableCell align="center"> <Link href={`/races/results/${race.id}`}>{race.race_name}</Link> </StyledTableCell> There is a ...

javascriptcssreactjs

What is the reason for padding influencing the overall dimensions?

The result I achieved was unexpected. After realizing that the text was positioned above the green markers, I decided to add some internal padding to the three pink containers. To my surprise and disappointment, when I made this adjustment, it ended up lo ...

css

Ensure that icons are evenly spaced, regardless of whether they display a notification badge or not

Although not as abundant as depicted in the image below, it is more evident that I am seeking a couple of font awesome icons overlaid with a bootstrap badge to display notifications. The two issues that I am encountering are: There is excessive spacing ...

htmlbootstrap-4

What could be causing my PHP mail script to report success but fail to deliver the email?

Previously, I have successfully used the same script and AJAX query to manage emails without any issues. However, on this particular site, it seems that the process is not functioning properly. Although the POST request indicates success, no email is being ...

phphtmljqueryajax

Tips for opening a local HTML file in Internet Explorer

Is there a way to make an HTML file saved on the desktop open in Internet Explorer instead of Chrome as the default browser? Alternatively, is it possible to set Microsoft Word hyperlinks to open website links in Internet Explorer? Thank you! ...

javascripthtmlms-office

Stop html text from overflowing container

I'm facing an issue with a Bootstrap container where the text inside is overflowing and not aligning properly. How can I ensure that the text stays within the container and doesn't cross over, instead just aligning at the bottom of the upper text ...

htmlcssbootstrap-5

What are some alternatives for appending after something?

<table border="2"> <tr><td>one</td><td>two</td></tr> <tr><td>one</td><td>two</td></tr> <tr><td colspan="2" id="new" >add new</td></tr> </ta ...

javascriptjqueryhtml

When I incorporate the "a" tag, transformations take place within my divs

My divs undergo changes when I use the "a" tag. Despite writing 600 lines of code, my website is starting to malfunction. It was not supposed to have any impact when I used the "a" tag. Note: I never assigned a class to it. Here is an example: <a hre ...

javascriptc#htmlcssbootstrap-4

Struggling to figure out Visual Studio Code - Having trouble loading images and fonts into my CSS file

It seems like I'm missing something here (just so you know, I'm totally new at this). I attempted to use fonts that are loaded on my computer for my CSS stylesheet (font file in my VSC), but no luck. I also tried using images from my files as bac ...

cssimagefonts

Select only eBook files using this HTML form: {file-type}

I am looking to implement a form that includes an option to upload files by selecting "choose file". However, I want to restrict the displayed files to only show .epub and .mobi files when the user opens the selection pop-up box on their operating system. ...

htmlformsselectuploadfile-type

Utilizing Webpack to emulate the @apply functionality of Tailwind CSS and shift away from using @extend in SASS

I am currently developing an internal CSS 'framework' / methodology that falls somewhere in between ITCSS and Tailwind. We heavily rely on utility classes, but sometimes the length of the actual class name becomes too much and we feel the need t ...

csswebpacksasstailwind-css

Adding extra space between a tooltip popup and an element in Twitter Bootstrap

I have been looking for a way to increase the space between my tooltips and the triggering element in Bootstrap. Usually, the tooltip appears right next to the element, but I want to create more distance between them. Is there a way to achieve this using ...

javascriptjquerycsstwitter-bootstrap