CODEWITHSUNDEEP
htmlcss
wesleyy
wesleyy

Reputation: 2735

Place logo and text in the same line

I am trying to create the header part of my page. In the header, I want to have an image (a logo) on the left side, and a "logged in as ..." on the right side of the same line.

The problem that I have is that the logo simply overrides the "logged in as" text, so only logo stays visible on the page, and there is no text.

Here is the code:

<div class="header">
    <span class="myLogo"/>

    <span class="user">
        Logged in as " target="_blank">${user}</a>
    </span>
</div>

CSS:

    .myLogo {
      display: inline;
      float: left;
      margin-left: 10px;
      margin-top: 30px;
      content:url("myLogo.png");
    }

    .user {
      text-align: right;
      white-space: nowrap;
      display: inline;
      float: left;
      margin-top: 20px;
      margin-right: 30px;
      font-size: large;
    }

    .header {
      display: inline-block;
}

How can I have my logo on the left side of the page, and my text on the right side of the page, but in the same line?

Upvotes: 0

Views: 10064

Answers (5)

Gowtham
Gowtham

Reputation: 1597

You have to make 2 changes

  1. remove inline block for .header class
  2. Change float:right under .user class

.myLogo {
      display: inline;
      float: left;
      margin-left: 10px;
      content:url("https://1.bp.blogspot.com/-NknV6HIVxKc/V06_WraBJEI/AAAAAAAAJWc/QwJMGxKHaywCIf2QHOLD-YwFQdn8VDaVgCLcB/s320/chelsea-logo.PNG");
      width:50px;
      height:50px;
    }

    .user {
      text-align: right;
      white-space: nowrap;
      display: inline;
      float: right;
      margin-right: 30px;
      font-size: large;
    }
<div class="header">
    <span class="myLogo"></span>

    <span class="user">
        Logged in as <a target="_blank">hai</a>
    </span>
</div>

Upvotes: 0

DarknessZX
DarknessZX

Reputation: 686

I think you should set 

display: inline-block;

for both class or change class user to 

float: right

Upvotes: 2

Anirudh
Anirudh

Reputation: 457

You can try this method

HTML:

 <div>
<img class="myLogo" src = "myLogo.png"/>
</div>

<div class="user">
    Logged in as <a target="_blank">${user}</a>
</div>

CSS:

   .myLogo {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-top: 30px;
  height: 10px;
  width: auto;
}

.user {
  text-align: right;
  white-space: nowrap;
  display: inline;
  float: left;
  margin-top: 20px;
  margin-right: 30px;
  font-size: large;
}

.header {
  display: inline-block;
}

Upvotes: 0

Michał Sadowski
Michał Sadowski

Reputation: 2149

Why do you use content instead of an <img> tag?

Anyway, what I could suggest for you is to use flexbox:

.header{
  display: flex;
  align-items: baseline;
}
.user{
  margin-left: auto;
}

Upvotes: 1

hameeda naz
hameeda naz

Reputation: 287

Use this CSS. 

.myLogo {
          display: inline;
          float: left;
          margin-left: 10px;
          margin-top: 30px;
          content:url("myLogo.png");
        }

        .user {
          white-space: nowrap;
          display: inline;
          float: right;
          margin-top: 20px;
          margin-right: 30px;
          font-size: large;
        }

        .header {
          display: inline-block;
          width: 100%;clear:both;
    }

Upvotes: 1

Related Questions