Possitioning an image next to two different text elements

user_15078457 0
Viewed 36

I am trying to make a header bar on my HTML page that has a h1 and h2 element but then I want an image to appear to the right of both of them. What ever i try the image appears below the other two, i have tried display:inline-block; but that didn't seem to work.

Any ideas how i do it?

.headerBar {}

.headerBar h1 {
  float: left;
  width: 400px;
  line-height: 0;
}

.headerBar h2 {
  width: 400px;
  line-height: 1;
}

.headerBar img {
  width: 40px;
  border-radius: 50px;
}
<div class="headerBar">
  <h1>My Name</h1>
  <h2>Welcome</h2>
  <img src="https://dummyimage.com/300x200/000000/fff" alt="Photo" />
  <br>
</div>

css html
2 Answers

You can wrap your headings in wrapper and make .headerBar flex, for more details see CSS part of Code Snippet.

.headerBar {
  display: flex; /* make main container flex */
  flex-direction: row; /* this will make container in one row */
  align-items: flex-start; /* vertical align content to top */
  justify-content: space-between; /* add gap between content */
}

.headerBar h1 {
  line-height: 0;
}

.headerBar h2 {
  line-height: 1;
}

.headerBar img {
  width: 40px;
  border-radius: 50px;
}
<div class="headerBar">
  <div class="headerWrapper">
    <h1>My Name</h1>
    <h2>Welcome</h2>
  </div>
  <img src="https://dummyimage.com/300x200/000000/fff" alt="Photo" />
</div>

user_60858640

Flex is a good solution. You also can grid for that. Is it what you want?

.headerBar {
  display: grid;
  grid-template-columns: auto auto;
  width: 100%;
}

.headerBar h1 {
  line-height: 0;
}

.headerBar h2 {
  line-height: 1;
}

.headerBar .image {
  border-radius: 50px;
  grid-row: 1 / 3;
  grid-column: 2 / 3;
}
<div class="headerBar">
  <h1>My Name</h1>
  <div class="image"><img src="https://dummyimage.com/300x200/000000/fff" alt="Photo" /></div>
  <h2>Welcome</h2>
</div>

user_170071840
Related