CODEWITHSUNDEEP
htmlcss
Daniel Brow
Daniel Brow

Reputation: 35

Why isn't display inline working?

I am having a really odd situation here. I have spent the last 7 hours researching why I cannot get display: inline; to work at all, unless it's on my main page. Nothing seems to be helping.

Here is the relevant coding.

<!DOCTYPE html>
<html>      
<head>
  <title>Contact Info</title>
  <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>

  <div class="name">
    <p>*****<p>
    <a href="index.html">Go Back</a>
  </div>

  <div class="contact">
    <p>
      <span style="color:#000000">By Phone:</span>
      <a href="tel:*******">**********</a>
    </p>
    <p>
      <span style="color:#000000">By Email:</span> 
      <a href="mailto:****@***.ca">****@****.ca</a>
    </p>
    <p>
      <span style="color:#000000">By Mail:</span> 
      <span style="color:#3300cc">***************</span>
    </p>
  </div>

</body>

And here is the CSS.

.name {
  display: inline;
}

The result is the two items, (The name "****" and the "Go Back" link), appear one on top of each other. I have tried making it a list, but that had no effect. I tried making them both links, but that had no effect. display: inline-block; also has no effect. Nothing I do has any effect on the div class name. I tried changing the name of the div class several times no effect.

Upvotes: 2

Views: 75

Answers (2)

David Waters
David Waters

Reputation: 12028

The problem here is the the <p> tag is also a block level element. One solution would be to add a style such that a <p> within the .name div is also inline

.name, .name p {display: inline;}

See https://jsfiddle.net/t0z2p9bn/

It would be better to change your html such that the stars are not contained within a <p> tag 

<div class ="name">
*****
<a href="index.html">Go Back</a>
</div>

See https://jsfiddle.net/t0z2p9bn/1/

Upvotes: 2

MGOwen
MGOwen

Reputation: 7259

  1. divs should not be used for inline elements. Did you mean to use a span?

  2. There is a typo - it shouldn't make a difference, but there's an unneeded space after "class" here:

<div class ="name">

Upvotes: 0

Related Questions