Issue

This Content is from Stack Overflow. Question asked by Muhammed Nishad

Iam desiging an header for my college project which the logo is supposed to come in the top left corner.i have tried by using float property in css but it did not make reflection. How can I shift my logo to top left side in the header bar? I tried most of the time but code is not executed.
[1]: https://i.stack.imgur.com/9SLRP.png
My HTML code and CSS code is below:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header class="header">
    <img class="logo" src="img/pharmapp.png" alt="logo">
    <p class="p">Medcines on your Doorstep</p>
    <nav class="nav__links">
    <ul> 
        <li><a href="#">Login</a></li>
        <li><a href="#">SignUp</a></li>
        <li><a href="#">About</a></li>
    </ul> 
    </nav>
    <a class="cta" href="#" <button>Contact</button></a>
    </header>
    

    </body>
    </html>

css:-

@import url('https://fonts.googleapis.com/css2? 
family=Montserrat+Alternates:ital,wght@0,500;1,400&display=swap');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
background-color:#F5F5F5;
}
li, a, button {
font-family:"Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: #000000;
text-decoration: none;

}
header{
display: flex;
justify-content:space-between;
align-items: center;
padding:30px 10%;
background:linear-gradient(rgba(165, 246, 144, 0.3) 0%,
rgba(158, 249, 216, 0.63)  100%);
height: 56px;
}
p{
position: absolute;
width: 584px;
height: 67px;
left: 232px;
top: 25px;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
background: url(pharmapp.png);
align-items: center;
font-family: 'Montserrat';
font-style: italic;
font-weight: 400;
font-size: 16px;
line-height: 34px;

color: #000000;

}
.logo{
position: relative;
float: left;
margin-block-start:10px;
background: url(pharmapp.png);
height: 122px;
left: 20px;
top:0px;
bottom: 40px;
}

Solution

Just place your .logo element and your p tag in a div. It will sort itself out automatically.

You also forgot to close the a tag around the button.

Don’t use float or absolute positioning in a layout, unless you know what you’re doing…

@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,500;1,400&display=swap')

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #F5F5F5;
}

li,
a,
button {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #000000;
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
  background: linear-gradient(rgba(165, 246, 144, 0.3) 0%, rgba(158, 249, 216, 0.63) 100%);
  height: 56px;
}

/* p {
  position: absolute;
  width: 584px;
  height: 67px;
  left: 232px;
  top: 25px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  background: url(pharmapp.png);
  align-items: center;
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 34px;
  color: #000000;
} */

.logo {
/*  position: relative;
  float: left;*/
  margin-block-start: 10px;
  background: url(pharmapp.png);
  height: 122px;
/*  left: 20px;
  top: 0px;
  bottom: 40px;*/
}

<header class="header">
  <div>
    <img class="logo" src="img/pharmapp.png" alt="logo">
    <p class="p">Medicines on your Doorstep</p>
  </div>
  <nav class="nav__links">
    <ul>
      <li><a href="#">Login</a></li>
      <li><a href="#">SignUp</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
  <a class="cta" href="#"><button>Contact</button></a>
</header>

This Question was asked in StackOverflow by Muhammed Nishad and Answered by Rickard Elimää It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.