HTML/CSS display inline not working

Question

I am trying to have an image and a h1 element on the same line. I have looked this up and tried to use display:inline; for both the parent div element as well as both of the elements.

This is what I have so far

<div style="display:inline;">
    <a class="blur" href="#"><img style="margin-top:6px;display:inline;margin-left:1320px;" src="images/gmail.png"></a>
    <h1 style="margin-top:6px;display:inline;margin-left:1220px;font-size:20px;color:white;font-style:italic;">Mail Us</h1>
</div>

This displays the image on the line I want, but the h1 element under it.

What I want to accomplish is both of these elements on the same line.

I'm not sure how big your intended display size is, but you have a margin-left of 1320px, I assume there's not going to be much room left for the H1 tag next to it. Without really knowing what you're trying to do, I think you may be better off using float: right. Float article — James Hay
– James Hay, Commented Apr 22, 2015 at 23:09
you should be applying the display: inline style to the <a> tag not the <img> tag — deowk
– deowk, Commented Apr 22, 2015 at 23:11
my bad the <a> element will display inline by default so just remove it from the <img> tag. — deowk
– deowk, Commented Apr 22, 2015 at 23:20
To prevent the wrapping, add white-space: nowrap to the main div. But doing so will put your h1 tag 1220px to the right of the img, which may not be what you're going for. — Rick Hitchcock
– Rick Hitchcock, Commented Apr 22, 2015 at 23:20

Community · Accepted Answer · 2017-05-23 12:28:17Z

4

You need use display:inline-block for each element (not the parent). Fiddle with your example: http://jsfiddle.net/Lupjuby6/

And please, do not use CSS inline!! This is very bad to your HTML, besides making the code more complicated to analyze, and a lot of other bad things.

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered Apr 22, 2015 at 23:11

Rafael Almeida

6877 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

JarFile Over a year ago

What exactly is the dfferent between display:inline and inline-block if CSS inline is bad? EDIT: The elements are still not on the same line.

Rick Hitchcock Over a year ago

inline-block solves the problem only because you also removed the left margins. Restoring them restores the problem: jsfiddle.net/bb54c962

deowk Over a year ago

you do not need to set display: inline-block on the <img>, it is a child element of the <a> which displays inline by default

Stephen P Over a year ago

@JarFile when Rafael says "do not use CSS inline" it is not referring to the block vs inline vs inline-block display property; it is referring to including all of your CSS as part of a style="prop:value; prop:value;" on an element. Don't do that. Read the link Rafael provided. Put your styles in a separate .css stylesheet file, and use classes and ids as necessary. It does also look like you are using an <h1> simply to make the text big, you're not using it because it is a top level header.

Scott Selby · Accepted Answer · 2015-04-22 23:09:17Z

-2

h elements ( <h1> , <h2> , <h3> , etc. ) take up an entire line, that's just the way they're meant to work. It is going to be a lot more work to put another element on the same line, instead you should try using an <a> or <p> and style it to look just like the <h1> did .

When you make this change just set both elements to

display: inline-block;

answered Apr 22, 2015 at 23:09

Scott Selby

9,58012 gold badges63 silver badges97 bronze badges

Collectives™ on Stack Overflow

HTML/CSS display inline not working

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related