CODEWITHSUNDEEP
htmlcss
Jeet
Jeet

Reputation: 795

how to align image and label side by side in html?

Look at the image

I want my logo on the left side and navigation bar on the right side. I tried img outside nav class and it did align to left but i want nav and my logo together. How do i do this? Thank you.

Here is my Code:

.img {
  text-align: left;
  background-position: left;
}

.nav {
  border-bottom: 1px solid lightgray;
  text-align: right;
  line-height: 70px;
  height: 70px;
}
<div class="nav">
  <img src="images/logo.png" alt="" height="40px" width="80px" style="margin-left: 5px; text-align: left;">
  <label for="toggle"> &#9776; </label>
  <input type="checkbox" id="toggle">
  <div class="menu">
    <a href="#">Home</a>
    <a href="#">Gallery</a>
    <a href="#">Contact</a>
    <a href="#">Share</a>
    <a href="#">Useless</a>
  </div>
</div>

Upvotes: 1

Views: 2759

Answers (3)

s.kuznetsov
s.kuznetsov

Reputation: 15223

Here's a good solution. The checkbox (#toggle), I think, will be hidden by default.

.img {
    text-align: left;
    background-position: left;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid lightgray;
    text-align: right;
    line-height: 70px;
    height: 70px;
}

.nav label {
  margin-right: auto;
}

#toggle {
  display: none;
}
<div class="nav">
       
        <img src="images/logo.png" alt="" height="40px" width="80px" style="margin-left: 5px; text-align: left;">
        <label for="toggle"> &#9776; </label>
        <input type="checkbox" id="toggle">

        <div class="menu">
            <a href="#">Home</a>
            <a href="#">Gallery</a>
            <a href="#">Contact</a>
            <a href="#">Share</a>
            <a href="#">Useless</a>
        </div>
    </div>

Upvotes: 0

s1834
s1834

Reputation: 443

Try writing the attached code, it will surely work but if it doesn't let me know in the comments, I will try my best to help you.

In this code I have have made a new <div> and added float:left; to it and removed some inline and internal CSS.

Your code was not getting the job done because you have added opposite properties to parent (.nav) element and child (menu) element.

.img {
      float: left;
}
.nav {
    border-bottom: 1px solid lightgray;
    line-height: 70px;
    height: 70px;
}
.menu{
    float: right;
}
<!DOCTYPE html>
<html>
<head>
  <title>Nav</title>
</head>
<body>
<div class="nav">
  <div class="img">
        <img src="images/logo.png" alt="" height="40px" width="80px" style="margin-left: 5px;">
        <label for="toggle"> &#9776; </label>
        <input type="checkbox" id="toggle">
        </div>
        <div class="menu">
            <a href="#">Home</a>
            <a href="#">Gallery</a>
            <a href="#">Contact</a>
            <a href="#">Share</a>
            <a href="#">Useless</a>
        </div>
    </div>
</body>
</html>

Upvotes: 4

Umutambyi Gad
Umutambyi Gad

Reputation: 4101

just use float to align content left or right

.img {
      float: left;
}
.nav {
    border-bottom: 1px solid lightgray;
    line-height: 70px;
    height: 70px;
}
.menu{
    float: right;
}
<!DOCTYPE html>
<html>
<head>
  <title>Nav</title>
</head>
<body>
<div class="nav">
  <div class="img">
        <img src="images/logo.png" alt="" height="40px" width="80px" style="margin-left: 5px;">
        <label for="toggle"> &#9776; </label>
        <input type="checkbox" id="toggle">
        </div>
        <div class="menu">
            <a href="#">Home</a>
            <a href="#">Gallery</a>
            <a href="#">Contact</a>
            <a href="#">Share</a>
            <a href="#">Useless</a>
        </div>
    </div>
</body>
</html>

Upvotes: 2

Related Questions