Search code examples
htmljekyllgithub-pages

Aligning image to fit the right side of a header on website

I'm currently trying to make a website using Jekyll themes, GitHub Pages and am facing a problem. In my index.html file, I want to add a picture of myself on the ride side of the introductory text. I tried doing so like this:

---
layout: default
title: stuff
---

<!DOCTYPE html>
<html>
  <head>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-mml-chtml.js"></script>
  </head>
  <div id="PhotoOfMe">
    <img src="picture_of_me" alt="me" style="float: right;" width="150" height="150">
  </div>
  <div class="blurb">
    <h1>Website where keeps his stuff.</h1>
      <p>Currently a student of a bit of everything. <a href="/about">Read more about my life...</a></p>
  </div>
</html>

but this is resulting in something like:

enter image description here

where the picture isn't aligned with the text. How might I go about fixing this issue? Thanks.

Solution

  • This is done by wrapping it all in a <div> and setting it's style to display: flex.

    <div style="display: flex">
  <div class="blurb">
    <h1>Website where keeps his stuff.</h1>
      <p>Currently a student of a bit of everything. <a href="/about">Read more about my life...</a></p>
  </div>
  <div id="PhotoOfMe" style="margin-left:10px">
    <img src="https://images.unsplash.com/photo-1518806118471-f28b20a1d79d" alt="me" width="150" height="150">
  </div>
</div>