-1

I've been searching for a while now to why my heading and paragraph will not display inline.

I have tried putting them in a div to display inline.

I have also tried without the div.

here is a screen shot of what the website looks like right now https://gyazo.com/0331b7b59823674705305ff3e8dabd5d

HTML

<!DOCTYPE html>

<head>
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="shortcut icon" type="image/png" href="img/icon.png" />
</head>

<body>
  <div class="header" id="header">
    <h1>Liam Winterbourne</h1>
    <h2>Graphics Designer</h2>

    <p1>phone number</p1>
    <br></br>
    <p1>director@liaamb.co.uk</p1>
  </div>

</body>

</html>

CSS

head {
}

body {
  font-family: "calibri light";
  background-image: url(img/background.jpg);
}

br {
  margin-top: 0px;
}

.header {
  display: inline;
}

.header h1, .header p1 {
  display: inline;
}

h1 {
  display: inline;
  margin-bottom: 0px;
  color: #ffffff;
  font-size: 25px;
  letter-spacing: 7px;
  font-weight: 100;
}

h2 {
  margin-top: 0px;
  color: #ffffff;
  font-size: 15px;
  letter-spacing: 3px;
  font-weight: 100;
}

p1 {
  display: inline;
  float: right;
  color: #ffffff;
  letter-spacing: 2px;
  font-size: 20px;
}
LiaamB
  • 7
  • 1

3 Answers3

1

You can easily achieve this structure with flex. No need of float. Change your html to like this. See updated fiddle

<div class="header" id="header">
   <div style="display: flex;">
     <h1>Liam Winterbourne</h1>
     <p style="margin-left: auto;">director@liaamb.co.uk</p>
   </div>

   <div style="display: flex;">
     <h2>Graphics Designer</h2>
     <p style="margin-left: auto;">phone number</p>
   </div>
</div>

CSS

body {
  font-family: "calibri light";
  background-image: url(img/background.jpg);
}

.header {
  display: inline;
}


h1 {
  margin-bottom: 0px;
  color: #ffffff;
  font-size: 25px;
  letter-spacing: 7px;
  font-weight: 100;
  margin-top: 0px;
}

h2 {
  margin-top: 0px;
  color: #ffffff;
  font-size: 15px;
  letter-spacing: 3px;
  font-weight: 100;
}

p {
  color: #ffffff;
  letter-spacing: 2px;
  font-size: 20px;
}
Nandita Sharma
  • 13,287
  • 2
  • 22
  • 35
0

Place your html like below

<div class="header" id="header">
    <div class="right">
    <p1>phone number</p1>
    <br></br>
    <p1>director@liaamb.co.uk</p1>
    </div>

    <h1>Liam Winterbourne</h1>
    <h2>Graphics Designer</h2>  

</div>

Remove float right from p1

Add new css like below

.right{
    float: right;
}

Just assume you have a two boxes in header like below image enter image description here

If you move first box to right side then bottom box shift to the top side because of empty area, so that both boxes display in same line.

Vishal Panara
  • 233
  • 3
  • 15
  • Thank you for the insight, i want to understand what the problem was here. Was it because the heading came first? I've read that they work like blocks and take up the whole line. – LiaamB May 25 '18 at 11:23
0

flex is a good option to use it, should be trying it out. 'p1' is not a html tag, you can use 'p' tag.

You can try fixing this.. In your code by giving (width 50% for each element, float:left, text-align:right for right elements) to the elements this issue may be fixed.

Naag Pal
  • 1
  • 3