How can I align div to right when float is not working

Question

I am new to web development and I am trying to create a responsive navbar but float Property is Not Working. Here is the HTML Code

<html>
<head>
                <meta charset="UTF-8">
                <title>Page title</title>
                <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
                <link rel="stylesheet" href="css.css"></link>
</head>
<body>
                <nav class="nav">
                                <div class="logo" id="logo2">
                                                <h1>&nbsp;Nav</h1>
                                </div>
                                <div class="links float-right">
                                   <a href="#">Home</a>
                                                <a href="#">About</a>
                                                <a href="#">Contact</a>
                                                <a href="#">Work</a>
                                </div>
                </nav>
</body>
</html>

and here is the CSS code

* {
                margin: 0;
                padding: 0;
}
a {
                text-decoration: none;
                color: white;
}
nav {
             display: flex;
                background: #000000;
                color: white;
                line-height: 76px;
}
nav {
                height: 76px !important;
}
.logo h1{
             line-height: 76px;
}
a {
                display: inline-block;
}
.links{
                float:right !important;
}

I have tried all thing I think of like padding, Increasing logo width, etc. But it make it unresponsive on bigger screen

hi , add ` justify-content: space-between` to nav styles. – Ahmad MRF Jan 18 '22 at 06:31 — Ahmad MRF, Jan 18 '22 at 06:31

score 0 · Answer 1 · answered Jan 18 '22 at 06:30

0

Add this to your nav style

justify-content: space-between;

answered Jan 18 '22 at 06:30

marcos.efrem

757
3
13

score 0 · Answer 2 · answered Jan 18 '22 at 06:33

add justify-content: space-between to nav styles

* {
                margin: 0;
                padding: 0;
}
a {
                text-decoration: none;
                color: white;
}
nav {
             display: flex;
                background: #000000;
                color: white;
                line-height: 76px;
                justify-content: space-between;
}
nav {
                height: 76px !important;
}
.logo h1{
             line-height: 76px;
}
a {
                display: inline-block;
}
.links{
                float:right !important;
}

<html>
<head>
                <meta charset="UTF-8">
                <title>Page title</title>
                <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
                <link rel="stylesheet" href="css.css"></link>
</head>
<body>
                <nav class="nav">
                                <div class="logo" id="logo2">
                                                <h1>&nbsp;Nav</h1>
                                </div>
                                <div class="links float-right">
                                   <a href="#">Home</a>
                                                <a href="#">About</a>
                                                <a href="#">Contact</a>
                                                <a href="#">Work</a>
                                </div>
                </nav>
</body>
</html>

score 0 · Accepted Answer · answered Jan 18 '22 at 07:31

Solution 1: (Using Float)

Remove display: flex; from nav CSS and add float: left; on .logo CSS.

nav {
 background: #000000;
 color: white;
 line-height: 76px;
}
.logo {
 float: left;
}

Solution 2: (Using Flex)

Just add justify-content: space-between; in nav CSS.

nav {
 display: flex;
 background: #000000;
 color: white;
 line-height: 76px;
 justify-content: space-between;
}

I hope it'll help you out, Thank You

score 0 · Answer 4 · answered Jan 18 '22 at 07:38

just add in nav css ( justify-content: space-between;)

nav { display: flex;

            background: #000000;
            color: white;
            line-height: 76px;

         justify-content: space-between;

}

* {
                margin: 0;
                padding: 0;
}
a {
                text-decoration: none;
                color: white;
}
nav {
             display: flex;
                background: #000000;
                color: white;
                line-height: 76px;
                 justify-content: space-between;
}
nav {
                height: 76px !important;
}
.logo h1{
             line-height: 76px;
}
a {
                display: inline-block;
}
.links{
                float:right !important;
}

  <nav class="nav">
                                <div class="logo" id="logo2">
                                                <h1>&nbsp;Nav</h1>
                                </div>
                                <div class="links float-right">
                                   <a href="#">Home</a>
                                                <a href="#">About</a>
                                                <a href="#">Contact</a>
                                                <a href="#">Work</a>
                                </div>
                </nav>

How can I align div to right when float is not working

4 Answers4