CODEWITHSUNDEEP
htmlcss
ms.tery
ms.tery

Reputation: 149

How to align logo at left and navigation on right side?

How to align the logo to my navigation bar?

My HTML code is:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="icon" type="image/png" href="SENCOR_Logo.ico">
<title>SENCOR</title>
</head>
<body>
<div class="bg-div">
    <img class="logo-img" src="SENCOR_Logo.jpg" ALT="align box" ALIGN=CENTER>
    <nav>
        <ul>
            <li><a href="#">Monitoring</a></li>
            <li><a href="#">Process</a></li>
            <li><a href="#">Post and Create Email/Excel</a></li>
            <li><a href="#">Reports</a></li>
            <li><a href="#">Tools</a></li>
            <li><a href="#">Sales</a></li>
        </ul>
    </nav>
</div>
</body>
</html>

and heres my style.css code:

body{
    margin: 0;
    padding: 0;
    font-size: 15px;
}

/* Navigation */
nav{
    margin: 0;
    overflow:hidden;
    text-align: center;
}

nav ul{
    margin: 0;
    padding: 0;
}

nav ul li{
    display: inline-block;
    list-style-type: none;
}

nav > ul > li > a{
    color: #aaa;
    display: block;
    line-height: 2em;
    padding: 0.5em 1em;
    text-decoration: none;
}
-----------
.logo-img{
    position: relative;
    margin: 10px 15px 15px 10px;
}
.bg-div{
    background:#333;
}

I want to display the logo at the left side and the navigation bar to the right side.

Upvotes: 2

Views: 80268

Answers (3)

Todd Moore
Todd Moore

Reputation: 430

Made a pen far more simpler:

https://codepen.io/DevAlokes/pen/yLEJEYY

* {
  text-decoration: none;  
  list-style-type:none;
  color: white
}
.bg-div {
  background-color: #333; 
  display: flex; 
  justify-content: space-between;
}  
nav ul {
  display: flex; 
} 
nav ul li{ 
  margin: 0 12px;
}

Upvotes: 6

Heron Yang
Heron Yang

Reputation: 336

Normally, it's better to use "position: fixed;" for navigation bars on top. So, your css can do like this:

.logo-img{
    position: fixed;
    margin: 10px 15px 15px 10px;
    left: 0;
    display:inline;
}

.bg-div{
    background:#333;
    height: 50px;
}

.bg-div nav {
    position: fixed;
    display:inline;
    right: 0;
}

Upvotes: 2

hungerstar
hungerstar

Reputation: 21685

The simplest and most basic answer is, use floats.

.logo-img {
    float: left;
}
nav {
    float: right;
}

Upvotes: 2

Related Questions