0

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

13
  • What about display:inline?
    – Scott
    Jun 2, 2016 at 12:25
  • Tried. Does not work.
    – Coderhhz
    Jun 2, 2016 at 12:27
  • 1
    try putting logo inside the h1 tag <h1><img src="img/hrcimg.jpg" alt="logo"></h1> Jun 2, 2016 at 12:27
  • 1
    I'd imagine you've got another style elsewhere that is overriding what you're trying to do here as it works fine for me. Jun 2, 2016 at 12:31
  • 1
    Why does that column look so small? If the text is wrapping like that there's no room left for it to sit right of the image. Hard to really troubleshoot the problem without a live example to refer to. Consider creating a pen you can link to, with the relevant styles and/or frameworks included so we have a better prospective of the whole picture. Jun 2, 2016 at 12:34

3 Answers 3

1

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.

1

Try this out:

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

0

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.