CODEWITHSUNDEEP
htmlcssheading
Coderhhz
Coderhhz

Reputation: 340

logo and h1 heading appear on same line using html and css

I want to create a webpage but encountered a problem in making the logo appear near the heading. I have tried the following code but this does not produce expected results.

I have the following code:

.line .box .header img {
  float: left;
}

.line .box.header h1 {
  position: relative;
  top: 1px;
  left: 10px;
}
<div class="line">
   <div class="box">
      <div class="s-6 l-2"> 
         <div class="header">
             <img src="img/hrcimg.jpg" alt="logo">
             <h1>United Nations Human Rights Council</h1>
        </div>
      </div>
   </div>
</div>

WEBSITE SCREEN output seen

Upvotes: 0

Views: 2669

Answers (3)

TheEarlyMan
TheEarlyMan

Reputation: 402

Try this out:

img, h1 {
  display: inline-block;
  vertical-align: middle;
}
<header>
  <img src="http://placehold.it/100x100">
  <h1>COMPANY NAME</h1>
</header>

Upvotes: 1

Bram B
Bram B

Reputation: 366

So i made a little something, correct me if i am wrong where the logo needs to be :)

.line img {
  float: left;
}

.line h1 {
  position:relative;
  float:left;
  top: 1px;
  left: 10px;
}

https://jsfiddle.net/3an65dfp/3/

Upvotes: 0

UncaughtTypeError
UncaughtTypeError

Reputation: 8722

You need to increase the width of .l-2 element.

Setting this element's width to 100% will result in the layout the title of your question eludes to.

When reaching lower resolutions, you'll need to adjust these styles accordingly so that the structure is maintained to a point.
Once the resolution reaches mobile proportions, consider displaying them in their own lines. This can be done by setting the logo to display as block with width: 100%; & height: auto;, you'll also need to kill the float rule at this point.

Upvotes: 1

Related Questions