CODEWITHSUNDEEP
htmlcssimage
Lauren
Lauren

Reputation: 87

Place Logo next to text in header

I'm attempting to place my logo right next to my text in the header of my webpage. I have played around with the 's but the best I can do is have the logo sit on top of the test. How can I fix this? 

 <header>
    <div class="header-content">
        <div class="header-content-inner">
            <img src="img/blue.png"><h1>WELCOME</h1>

            <p></p>
          </div>
 </header>

  <!-- CSS BEGINS -->
  header {
    position: relative;
    width: 100%;
    min-height: auto;
    text-align: center;
    color: #000;
    background-image: url();
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
 }

  header .header-content {
    position: relative;
    width: 100%;
    padding: 100px 15px;
    text-align: center;
 }


  header .header-content .header-content-inner h1 {
    margin-top: 0;
    margin-bottom: 0;
    text-transform: lowercase;
   font-weight: 700;
   color:gray;
  }

Upvotes: 1

Views: 18851

Answers (3)

user3804149
user3804149

Reputation:

You could float the image to the left!

float: left;

^ Just add this to the image class.

Upvotes: 1

BurningLights
BurningLights

Reputation: 2397

By default, heading tags (h1-h6) use display:block, which means that they take up the entire width of their parent container. Instead, you could set your h1 to use display: inline-block. Which will then make it only take up the width it needs, so it can display on the same line as your image. So, your CSS rule would become:

  header .header-content .header-content-inner h1 {
    margin-top: 0;
    margin-bottom: 0;
    text-transform: lowercase;
   font-weight: 700;
   color:gray;
   display: inline-block;
  }

Upvotes: 1

circusdei
circusdei

Reputation: 1967

Float the image to the left with css:

.header-content-inner img {
  float: left;   
}

Here's a working fiddle example: https://jsfiddle.net/0ocu4pt8/

Upvotes: 1

Related Questions