CODEWITHSUNDEEP
htmlcsscss-position
Prakhar
Prakhar

Reputation: 52

border-bottom is not working as expected

I am creating a navigation bar. I want the bottom border line to appear at the bottom of the navigation bar, like this:

Desired output

But what i am getting out of my code is this:

Actual output

My HTML:

<!DOCTYPE html>

<html>
    <head>
        <title>batman</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
        <div id="header">
            <a href="#" class="logo">
                <img src="./img/bat_logo.png" alt="batman" />
            </a>
            <nav>
                <ul style="list-style-type: none;">
                    <li><a href="#villains"> Villains </a></li>
                    <li><a href="#identity"> Identity </a></li>
                    <li><a href="#movies"> Movies </a></li>
                </ul>
            </nav>
        </div>
    </body>
</html>

My CSS:

.logo {
    float: left;
    height: 50px;
}
#header {
    padding: 5px 0px;
    border-bottom: 1px solid;
}

Upvotes: 0

Views: 1340

Answers (2)

Tanmoy Biswas
Tanmoy Biswas

Reputation: 191

Yoy should use width and float on #header which is main wrapper. With that you should add ul li{float:left} 

.logo {
    float: left;
    height: 50px;

}
#header {
    padding: 5px 0px;
    border-bottom: 1px solid;
    display:block;
    float:left;
    width:100%;
}

ul li{float:left}

Codepen link: https://codepen.io/bravotanmoy/pen/qjZEbb

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53709

Use flex with justify-content: space-between on the parent and you can also use align-items to vertically align things. Also changed <div id="header"> to <header id="header">, because it seems like a more semantically appropriate element.

img {
  max-width: 50px;
}
.logo {
  height: 50px;
  display: block;
}
#header {
  padding: 5px 0px;
  border-bottom: 1px solid;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav li {
  display: inline-block;
}
<header id="header">
  <a href="#" class="logo">
    <img src="https://images.coplusk.net/projects/19697/steps/33014/normal_big_cartoon_batman_symbol_1250787261.jpg" alt="batman" />
  </a>
  <nav>
    <ul style="list-style-type: none;">
      <li><a href="#villains"> Villains </a></li>
      <li><a href="#identity"> Identity </a></li>
      <li><a href="#movies"> Movies </a></li>
    </ul>
  </nav>
</header>

Upvotes: 2

Related Questions