Logo image and H1 heading on the same line

Question

I want to create my first web page but I encountered a problem.

I have the following code:

<img src="img/logo.png" alt="logo" />
<h1>My website name</h1>

I'd like to know how to make the logo and the H1 to be in the same line. Thanks!

score 112 · Accepted Answer · answered Jul 28 '12 at 13:19

112

As example (DEMO):

HTML:

<div class="header">
  <img src="img/logo.png" alt="logo" />
  <h1>My website name</h1>
</div>

CSS:

.header img {
  float: left;
  width: 100px;
  height: 100px;
  background: #555;
}

.header h1 {
  position: relative;
  top: 18px;
  left: 10px;
}

DEMO

answered Jul 28 '12 at 13:19

Danil Speransky

29,891
5
68
79

@Speransky Got almost same.. ;) – Mr. Alien Jul 28 '12 at 13:26
@SperanskyDanil You deserve it too am upvoting you, you missed out the `line-height` and `clear` I guess – Mr. Alien Jul 28 '12 at 13:32

score 23 · Answer 2 · answered Jul 28 '12 at 13:15

23

If your image is part of the logo why not do this:

<h1><img src="img/logo.png" alt="logo" /> My website name</h1>

Use CSS to style it better.

And it is also best practice to make your logo a hyperlink that take the user back to the home page.

So you could do:

<h1 id="logo"><a href="/"><img src="img/logo.png" alt="logo" /> My website name</a></h1>

answered Jul 28 '12 at 13:15

Moin Zaman

25,281
6
70
74

2

Is is "legal" per HTML specification? – Pawel Cioch Feb 05 '20 at 19:13

score 22 · Answer 3 · answered Jul 28 '12 at 13:15

22

Try this:

Put both elements in a container DIV.
Give that container the property overflow:auto
Float both elements to the left using float:left
Give the H1 a width so that it doesn't take up the full width of it's parent container.

answered Jul 28 '12 at 13:15

Billy Moat

20,792
7
45
37

score 8 · Answer 4 · answered Jul 28 '12 at 13:13

8

Try this:

<img style="display: inline;" src="img/logo.png" alt="logo" />
<h1 style="display: inline;">My website name</h1>

answered Jul 28 '12 at 13:13

M. Ahmad Zafar

4,881
4
32
44

score 6 · Answer 5 · answered Mar 12 '13 at 18:47

6

Just stick the img tag inside the h1 tag as part of the content.

answered Mar 12 '13 at 18:47

Dylan

71
1
1

2

@Kermit It's pretty self explanatory and worked for me! – Alex Alksne Nov 17 '15 at 04:04

score 4 · Answer 6 · edited Jan 02 '19 at 17:30

4

you can do this by using just one line code..

<h1><img src="img/logo.png" alt="logo"/>My website name</h1>

edited Jan 02 '19 at 17:30

deHaar

17,687
10
38
51

answered Jan 02 '19 at 16:27

shreya_js

107
13

score 3 · Answer 7 · answered Jul 28 '12 at 13:24

You can do it as Billy Moat told you, wrap your <img> and <h1> in a <div> and use float: left; to float your image to the left, set the <div> width and than set a line-height for your h1 and use <div style="clear: float;"></div> to clear your floating elements.

Fiddle

score 3 · Answer 8 · answered Aug 07 '15 at 15:32

3

I'd use bootstrap and set the html as:

<div class="row">
    <div class="col-md-4">
        <img src="img/logo.png" alt="logo" />
    </div>
    <div class="col-md-8">
        <h1>My website name</h1>
    </div>
</div>

answered Aug 07 '15 at 15:32

RustyIngles

2,433
4
27
31

score 1 · Answer 9 · edited Feb 16 '19 at 15:33

This is my code without any div within the header tag. My goal/intention is to implement the same behavior with minimal HTML tags and CSS style. It works.

whois.css

.header-img {
    height: 9%;
    width: 15%;
}

header {
    background: dodgerblue;

}

header h1 {
    display: inline;
}

whois.html

<!DOCTYPE html>
<head>
    <title> Javapedia.net WHOIS Lookup </title>
    <link rel="stylesheet" type="text/css" href="whois.css"/>
</head>
<body>
    <header>
        <img class="header-img" src ="javapediafb.jpg" alt="javapedia.net" href="https://www.javapedia.net"/>
        <h1>WHOIS Lookup</h1>
    </header>
</body>

output:

score 0 · Answer 10 · answered Jul 28 '12 at 13:13

0

in your css file do img { float: left; } and h1 {float: left; }

answered Jul 28 '12 at 13:13

Andy

14,427
3
52
76

score 0 · Answer 11 · answered Jul 02 '14 at 10:50

0

Check this.

 .header{width:100%;
    }

    .header img{ width: 20%; //or whatever width you like to have

    }

    .header h1{

    display:inline; //It will take rest of space which left by logo.
}

answered Jul 02 '14 at 10:50

Saqib Omer

5,387
7
50
71

score 0 · Answer 12 · answered Jun 20 '18 at 06:36

<head>
<style>
header{
    color: #f4f4f4;
    background-image: url("header-background.jpeg");    
}

header img{
    float: left;
    display: inline-block;
}

header h1{
    font-size: 40px; 
    color: #f4f4f4;
    display: inline-block;
    position: relative;
    padding: 20px 20px 0 0;
    display: inline-block;
}
</style></head>


<header>
<a href="index.html">
    <img src="./branding.png" alt="technocrat logo" height="100px" width="100px"></a>
    <a href="index.html">
    <h1><span> Technocrat</span> Blog</h1></a>
</div></header>

score 0 · Answer 13 · edited Jun 25 '19 at 08:58

0

Steps:

Surround both the elements with a container div.
Add overflow:auto to container div.
Add float:left to the first element.
Add position:relative; top: 0.2em; left: 24em to the second element (Top and left values can vary according to you).

edited Jun 25 '19 at 08:58

Tomerikoo

18,379
16
47
61

answered Jun 25 '19 at 08:21

Richa Mehta

1

Welcome to Stack Overflow @Richa It is always better to `include` the `source` or `references` in support of your answer and If possible provide `why` your answer works... – vaku Jun 25 '19 at 08:45

Logo image and H1 heading on the same line

13 Answers13

Steps:

Linked

Related