What is the best way to position the div element to the right side of the webpage?

Looking at my HTML code below, I am trying to reposition the 'site-logo' and 'nav-search-wrapper' div elements to the left side of the parent div (top-nav) and have the 'list' div element appear on the right side. However, they are currently all stacked up together on the left side of the page.

<!DOCTYPE html>
<html>
<head>
    <title>AirBnB</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<!-- Top Nav -->
<div class="top-nav">
    <div class="site-logo">
            <a href="index.html"  class="logo">
                <img src="https://upload.wikimedia.org/wikipedia/commons/6/69/Airbnb_Logo_B%C3%A9lo.svg" alt="AirBnB">
            </a>
    </div>  
    <div id="nav-search-wrapper">
            <form action="#" method="GET">
                <input type="text" name="search" id="nav-search" placeholder="Search">
            </form>
    </div>
    <div class="list">
        <ul>
            <li><a href="">Become A Host</a></li>
            <li><a href="">Help</a></li>
            <li><a href="">Sign Up</a></li>
            <li><a href="">Log In</a></li>
        </ul>
    </div>
</div>
</body>
</html> 

Presenting my custom CSS:

/* Customized CSS */
body{
    padding: 0px;
    margin: 0px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #484848;
    line-height: 1.43;
}

p{
    font-size: 16px;
    margin: 0px;
    padding: 0px;
}

a: link{
    font-size: 16px;
    text-decoration: none;  
    margin: 0px;
    padding: 0px;
}

a: visited{
    text-decoration: none;
    padding: 0px;
    margin: 0px;
}

h1, h2, h3, h4, h5, h6, ol, ul, li{
    margin: 0px;
    padding: 0px;
}

ul, ol{
    list-style-type: none;
}

::selection{
    color: #fff;
    background-color: #333;
}

::-moz-selection{
    color: #fff;
    background-color: #333;
}

.clearfix::after{
    content: "";
    display: table;
    clear: both;
}

/* Top Nav Styling */

.top-nav{
    position: fixed;
    width: 100%;
    height: auto;
    border-bottom:  1px solid #ccc;
    display: flex;
}

.site-logo{
    float: left;
}

.logo:link{
    color: #484848;
    display: inline-block;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;

}

.logo:hover {
    background-color: #f1f1f1;
}

.logo:visited{
    color: #484848;
}

.logo img{
    padding: 12px 18px;
    width: 100px;
    vertical-align: middle;
    border-right: 1px solid #ccc;
}

#nav-search-wrapper{
    float: left;
    display: inline-block;
    width: 490px;
    height: 100%;
}

#nav-search-wrapper form input{
    box-sizing: border-box;
    padding: 22px 10px 18px 52px;
    width: 100%;
    border: none;
}


#nav-search-wrapper form input::-webkit-input-placeholder{
    color: #666;
    font-size: 14px;
}

.top-nav .list{
    float: right;
    border: 1pt solid black;
}

.top-nav .list li{
    display: inline-block;
    line-height: 52.547px;
}

.top-nav .list ul{
    height: 100%;

}

Any suggestions on how to correctly adjust the positioning of the 'list' div element to the right side, while moving the other two div elements to the left within the top-nav parent element?

Current layout shown here. (The Airbnb Logo is a placeholder image in this learning project) https://i.stack.imgur.com/x0Dcg.png

Answer №1

The issue lies in this section:

.top-nav{
    display:flex;
}

If there is no specific reason for using flex in your case, simply removing it will resolve the problem (moving the list div to the right).

body{
    padding: 0px;
    margin: 0px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #484848;
    line-height: 1.43;
}

p{
    font-size: 16px;
    margin: 0px;
    padding: 0px;
}

a:link{
    font-size: 16px;
    text-decoration: none;  
    margin: 0px;
    padding: 0px;
}

a:visited{
    text-decoration: none;
    padding: 0px;
    margin: 0px;
}

h1, h2, h3, h4, h5, h6, ol, ul, li{
    margin: 0px;
    padding: 0px;
}

ul, ol{
    list-style-type: none;
}

::selection{
    color: #fff;
    background-color: #333;
}

::-moz-selection{
    color: #fff;
    background-color: #333;
}

.clearfix::after{
    content: "";
    display: table;
    clear: both;
}

/* Top Nav CSS */

.top-nav{
    position: fixed;
    width: 100%;
    height: auto;
    border-bottom:  1px solid #ccc;
}

.site-logo{
    float: left;
}

.logo:link{
    color: #484848;
    display: inline-block;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;

}

.logo:hover {
    background-color: #f1f1f1;
}

.logo:visited{
    color: #484848;
}

.logo img{
    padding: 12px 18px;
    width: 100px;
    vertical-align: middle;
    border-right: 1px solid #ccc;
}

#nav-search-wrapper{
    float: left;
    display: inline-block;
    width: 490px;
    height: 100%;
}

#nav-search-wrapper form input{
    box-sizing: border-box;
    padding: 22px 10px 18px 52px;
    width: 100%;
    border: none;
}


#nav-search-wrapper form input::-webkit-input-placeholder{
    color: #666;
    font-size: 14px;
}

.top-nav .list{
    float: right;
    border: 1pt solid black;
}

.top-nav .list li{
    display: inline-block;
    line-height: 52.547px;
}

.top-nav .list ul{
    height: 100%;

}
<html>
<head>
    <title>AirBnB</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<!-- Top Nav -->
<div class="top-nav">
    <div class="site-logo">
            <a href="index.html"  class="logo">
                <img src="https://upload.wikimedia.org/wikipedia/commons/6/69/Airbnb_Logo_B%C3%A9lo.svg" alt="AirBnB">
            </a>
    </div>  
    <div id="nav-search-wrapper">
            <form action="#" method="GET">
                <input type="text" name="search" id="nav-search" placeholder="Search">
            </form>
    </div>
    <div class="list">
        <ul>
            <li><a href="">Become A Host</a></li>
            <li><a href="">Help</a></li>
            <li><a href="">Sign Up</a></li>
            <li><a href="">Log In</a></li>
        </ul>
    </div>
</div>
</body>
</html> 

Answer №2

It's not possible to shift the div.list to the right side due to the flexbox layout of your top-nav. Simply remove the display:flex; property from the .top-nav class.

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

Performing JavaScript functions after fetching an XSLT page via AJAX

Is there a way to trigger JavaScript at a particular time without relying on setInterval() or onClick()? The issue I'm facing is that when I click to load an XSLT page using Ajax, the JavaScript within it does not execute even though it's writt ...

What could be causing my page to appear differently in medium resolutions with Bootstrap 4?

When viewing my basic Bootstrap 4 webpage on a medium screen size, there appears to be a blank space on the right side. https://i.sstatic.net/ohV20.jpg Visit the page Thank you very much. ...

automatically collapse a submenu once a different menu option is selected

After doing some research and trying out various solutions, I still couldn't get it to work. I made adjustments to my dropdown menu and click function so that each submenu opens and closes when its parent is clicked. However, I'm now looking to f ...

If a user types in Korean characters in the input field and then clicks away to any other part of the screen, the input field will automatically regain focus

jsfiddle instructions for testing: type Korean characters in the input field scroll down until the input field is no longer visible Click anywhere on the screen Expected result: the input field will come into focus with (Korean text) If the user enters K ...

Height of the div dynamically increases upwards

Just a quick question - is there a way to make position: fixed divs at the bottom of an element (such as the body) grow upwards as content is dynamically added? Maybe something like anchor: bottom or increase: up? I'm thinking that using JavaScript m ...

The positioning and floating of two divs are set to fixed without using percentage width, however, the functionality is not

Apologies for my poor English writing :) I am attempting to float two divs side by side in a fixed position, without using percentages. This code works well on most browsers but is not compatible with IE 6. HTML <div class="right"></div> < ...

Guide on altering the cursor icon during an AJAX operation within a JQuery dialog

When I have a JQuery dialog open and make some $.ajax calls, why can't I change the cursor? I want to display a progress cursor while the code is processing so that users can see that the action is still ongoing. However, even though I update the CSS ...

Error message: Unhandled error - $(...).sidr does not exist as a function. [Chrome developer console]

I included this code in the basic module HTML block of a WordPress page builder and encountered the white screen of death. According to the Chrome developer console, the following error occurred: helpers.js?ver=4.5.3:15 Uncaught TypeError: $(...).sidr is ...

Generate dynamic maps that are exportable to HTML format

I've utilized Leaflet to produce engaging interactive maps in R. However, I'm encountering an issue when trying to export the maps - the background map appears grey after exporting. library(leaflet) library(htmlwidgets) m <- leaflet(data.fra ...

Fixing content at the bottom inside a container with Bootstrap 4

My app is contained within a <div class="container">. Inside this container, I have an editor and some buttons that I always want to be displayed at the bottom of the screen. Here's how it looks: <div class="container> // content here.. ...

I desire to alter the description of an item within a separate div, specifically in a bootstrap

I used the map method to render all the images. However, I need a way to track the current image index so that I can change the item description located in another div. Alternatively, if you have any other solutions, please let me know. App.js : import Ca ...

In Internet Explorer, when utilizing a table-cell with a variable height, the position should be set to absolute for

I'm struggling with getting a uniform height in my horizontal layout using display: table-cell. While it looks great in Chrome, I can't seem to get Internet Explorer to display it the same way. Check out this link for reference This is how I wa ...

Is there a way to access the HTML and CSS source code without using the inspect feature

I'm working on a project that involves an "edit box" where users can write text, add emojis, change the background color, insert images, and more. After users finish creating their content, I want them to be able to send it via email. This means I ne ...

New feature that allows color change to be black or white depending on background color

Can anyone suggest a function from material UI that can automatically change text color to either white or black based on the background color? For example: <AppBar color="primary"> <Toolbar> <Typography color="i ...

Tips for adjusting the duration of a background in jQuery

jQuery(document).ready(function(){ jQuery('div').css('background-color','#ffffff').delay(12000).css('background-color','#000000'); }); Hello everyone! I'm having some trouble with this code. I am ...

Personalized AngularJS required text

After utilizing the built-in AngularJS directive required and encountering a validation error, I receive a small popup near the field displaying "Please fill out this field". My issue lies in needing the text to be displayed in another language. How should ...

Incorporate Zurb Foundation seamlessly into your current codebase without causing any

While Foundation is great for creating whole page designs, it may not be the best choice when you just need a small snippet to add into existing HTML and CSS code. In Foundation's _global.scss file, there are global settings such as: html, body { h ...

What is the easiest way to include a copyright symbol in a React component?

I am trying to include the copyright symbol in a React component, but it doesn't seem to be working for me. function Footer() { return ( <footer> <p>&copy</p> </footer> ); } <p>&copy</p> ...

Is there a way to adjust the padding of html and body elements to 0 in Vue.js without interfering with the styling of bootstrap

In my Vuejs project, I am designing a bootstrap navbar that has left and right margin spacing, even though I have not added any body or html padding. When I navigate to the welcome.blade.php file and set the body and html padding to 0 as shown below: *{ ...

The footer on my page seems to be having trouble connecting with the div section above it, causing it to abruptly halt in the middle

After spending a considerable amount of time, I managed to make my footer responsive by sticking it to the bottom of the page regardless of which page you are on. The code that achieved this is as follows: position: absolute; bottom: 0; However, the issu ...