Aligning an image alongside two separate blocks of text

I'm having trouble creating a header bar on my HTML page with a h1 and h2 element, along with an image positioned to the right of both. No matter what I try, the image keeps appearing below the other elements. I attempted using display:inline-block; but that didn't solve the issue.

Any suggestions on how I can achieve this?

.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>

htmlcss

Answer №1

To enhance the design of your headings, you can enclose them in a container and apply the .headerBar class with a flex property. For more detailed instructions, refer to the CSS section of the Code Snippet.

.headerBar {
  display: flex; /* utilize flexbox for layout */
  flex-direction: row; /* arrange items in a single row */
  align-items: flex-start; /* vertically align content at the top */
  justify-content: space-between; /* create spacing between elements */
}

.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>

Answer №2

Utilizing Flex could be a great solution, alternatively you can consider implementing grid. Is this aligned with your requirements?

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

.navBar h1 {
  line-height: 0;
}

.navBar h2 {
  line-height: 1;
}

.navBar .logo {
  border-radius: 50px;
  grid-row: 1 / 3;
  grid-column: 2 / 3;
}
<div class="navBar">
  <h1>Company Name</h1>
  <div class="logo"><img src="https://dummyimage.com/300x200/000000/fff" alt="Logo" /></div>
  <h2>Hello World</h2>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps for executing ASP code pulled from the database

In my ASP project, I have a single page where clicking on different links retrieves corresponding HTML from the database and loads it. Some links are always present on the page (static HTML), while other divs display dynamic content fetched from the DB. Wi ...

htmlasp.netcontrols

"Executing ng-click directive on a second click changes the route in AngularJS

Why does my ng-click only redirect to a new location on the second click? It should redirect to $location.path('/login.signin');, but it only works if I click the button again. It's strange. Where could this issue be originating from? Belo ...

javascripthtmlangularjsfirebaseangularjs-ng-click

Ensuring correct association of values to avoid redundancies

There are 5 fields available for users to fill out on this form: Leave Code, From Date, Input Time1, To Date, and Input Time2. These variables are declared as a dates object in the .ts file, as shown below. interface Supervisor { name: string; code: s ...

javascripthtmlangulartypescript

Strategies for optimizing progressive enhancement

Designing a website that is accessible to everyone is truly an art form, and Progressive Enhancement is something I hold dear... I am curious to hear about the best techniques you have used to ensure websites work for all users, regardless of their browse ...

javascripthtmlprogressive-enhancement

``How can I prevent browser popups/tooltips from appearing when a user exceeds the maximum value in a number

Is there a way to prevent the tooltip from appearing on the image when a user manually enters a quantity that exceeds the maximum allowed? The tooltip pops up when the form is submitted, and I need to find a way to turn it off. It seems like this tooltip ...

htmlreactjsmaterial-uireact-hook-form

Enhancing PHP Markdown to Support Custom CSS Classes

Markdown is a tool I use frequently in my PHP projects, but sometimes I find its output to be too simplistic. I wish I had more control over the layout and design of my content. For example, when inserting an image: <p> <img src="path/to/image. ...

phpcssmarkdown

Graphic selectors: a new take on radio buttons

I've been attempting to make this work, but it's not functioning correctly. Below is the CSS code: .input_hidden { position: absolute; left: -9999px; } .selected { background-color: #000000; } #carte label { display: inline-bl ...

javascripthtmljquerycssradio-button

labels placed beneath evenly spaced radio buttons arranged horizontally

When creating a user form, I am in need of multiple likert items to gauge opinions accurately. My project requires the use of the oTree library, which is closely integrated with django. It is essential that any solution implemented aligns with oTree as muc ...

cssdjangootree

Dynamic stacking of buttons in response to user navigation choices

Is it possible to create a navigation bar with 5 buttons using CSS and JS? Here is what I am looking to achieve: Display 5 nav/button options When a user clicks on a button, the other buttons should transition or hide, leaving only the selected button vi ...

javascripthtmlcss

Using Javascript to extract a custom attribute from a button element

In my HTML, there is a button that has a custom property called data-filter-params: <button class="button" type="submit" data-filter-params="{'Type', 'Filter.Type'},{'Code','Filter.Code'}" >Filter</button&g ...

javascriptjqueryhtmlasp.net-mvc

Issue with div element not functioning properly within table declaration on Internet Explorer

There seems to be an issue with the div tag not functioning properly inside a table definition: <table> <tr></tr> <div id="choice"><tr> <td>-------</td> <td>-------</td> <td>-------</td> &l ...

javascriptcsshtml-table

Browser now replacing attribute translate="yes" with translate="translate"

We have encountered an issue with a translation library that is affecting the functionality of our page. <html lang="en" class="notranslate translated-ltr"> <meta name="google" content="notranslate"> As ...

javascripthtmlvue.js

Unable to adjust custom link menu font size

I have designed a unique custom menu called SANDUSKY with the css classes of no-hover. It is positioned alongside HOME, ABOUT, GALLERY, STORE, CONTACT which serve as the navigation menus. While attempting to customize SANDUSKY, I successfully altered the c ...

css

I successfully managed to ensure that the splash screen is only displayed upon the initial page load. However, I am now encountering an issue where it fails to load again after I close the page. Is there any possible solution

After successfully implementing a splash screen that only plays once on page load, I encountered an issue. When I close the tab and revisit the page, the splash screen no longer plays. Is there a way to fix this problem? Perhaps by setting a time limit for ...

javascripthtmlcsscss-animationssplash-screen

Applying CSS to both pop-up and desktop interfaces can be achieved through the use of media queries or alternative solutions

I am facing a dilemma where I need to display the same content on both a pop-up and desktop view. While I have already implemented media queries to adjust the content for desktop and mobile views, I am struggling with displaying the same content on a pop ...

csssasspopupmedia-queries

Tips for displaying multiple XML datasets on an HTML webpage

I came across an example on W3schools that I'm trying to replicate: http://www.w3schools.com/xml/tryit.asp?filename=tryxml_app_first However, the example only displays one CD. My goal is to showcase all the data (in this case CDs) in the XML file. H ...

javascripthtmlxml

I'm looking for a way to showcase tasks in Fullcalendar that don't have a set end date

Is there a way to display a task in the full calendar when the task has a start date but no defined end date, such as a promotion that lasts until stock runs out? I would like the timeline for this type of task to extend indefinitely. However, since such ...

javascriptjqueryhtmlangularjsfullcalendar

Tips for properly sizing 13 images in Next.js

I've been facing some challenges while working on a responsive website, particularly with getting the sizing right. When viewing my image on mobile, everything looks good: https://i.sstatic.net/gNm14.png However, when I switch over to desktop view, ...

htmlcssnext.jsresponsive-design

Switching from Bootstrap's traditional "loading" style progress bar to a more minimal dot style progress bar

Currently, I am implementing a survey progress bar using Bootstrap's "loading" style. Here is the code for the progress bar: <div class="progress" style="height: 20px;"> <div class="progress-bar" role="pro ...

htmlcssbootstrap-4frontendbootstrap-5

Increase scrolling speed? - Background abruptly moves after scroll

I'm facing a minor issue. I want to create a parallax background effect similar to what can be seen on nikebetterworld.com. In my initial attempt, I managed to achieve some functionality, but I believe it can be improved. As I scroll, the background p ...

javascriptjquerycss