CODEWITHSUNDEEP
htmlcss
user3760959
user3760959

Reputation: 455

How to move the div element to the right side of the page?

Consider my below HTML code, I want to move the 'site-logo' and 'nav-search-wrapper' div elements to the left side of the parent div element (i.e, top-nav) and the 'list' div element to the right side. But they are all stacking up side by side to the left 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>

This is my css.

/* Essential 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 CSS */

.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%;

}

How can I make my 'list' div element to align to the right side, and other two div elements to the left side of the parent element.

This is what appearing now. (Airbnb Logo is a filler here. Its a dummy project for learning HTML, CSS) enter image description here

Upvotes: 0

Views: 4513

Answers (2)

Alexaidzuo
Alexaidzuo

Reputation: 174

You can't move div.list on right side because your top-nav is flexbox. You need just delete display:flex; from .top-nav class

Upvotes: 1

steliosbl
steliosbl

Reputation: 8921

The problem is here:

.top-nav{
    display:flex;
}

Unless there is a reason for having flex which is not evident in your example, then simply removing it solves the problem (list div floats 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>

Upvotes: 3

Related Questions