Position the image right beside the <h> heading

Question

Position the image right beside the <h> heading

Just recently, I embarked on the journey of learning HTML and CSS. However, I have encountered a challenge:

#referenzen{
        width: 100%;
        padding: 25px;
    
    }

    #referenzen h1, h2, h3, h4, h5, h6{
        margin-bottom: 0;
    }

    #referenzen p{
        padding-right: 25px;
        font-size: 18px;
    }

    #referenzen img{
        height: 50px;
        width: 50px;
        float: left;
    }

<div id="wrapper">
    <div id="referenzen">
        <img src="../Bilder/info.png">
        <h1>Unsere Firmengeschichte</h1>
        <br>
        <p>Die Firma Fair-Bau GmbH wurde im April 2010 gegründet und betätigt sich in den Sparten ausführende Baumeisterarbeiten, Vollwärmeschutzarbeiten, Verputzarbeiten sowie dem Handel mit Baustoffen.
            Der Betrieb beschäftigt 15- 20 Mitarbeiter.</p>
    </div>

Is there a way to directly link the image to the <h1> tag so they appear side by side?

Here is how the page looks currently: https://i.sstatic.net/Zq0gJ.jpg

Your help would be greatly appreciated!

html css

Answer 1

Answer №1

There are a couple of approaches I would consider:

Using HTML: You have the option to place the <img> tag inside your <h1></h1> tag
With CSS: You can designate both h1 and img to have a display: inline-block property

I personally prefer the first method.

Clarification for better comprehension:

The <h1>...<h6> tags typically display as block elements by default, occupying 100% width within their parent container. By changing them to inline-block, it alters the width to be either a specified value or adjusts based on the content size if no fixed width is defined.

Answer 2

There are a couple of approaches I would consider:

Using HTML: You have the option to place the <img> tag inside your <h1></h1> tag
With CSS: You can designate both h1 and img to have a display: inline-block property

I personally prefer the first method.

Clarification for better comprehension:

The <h1>...<h6> tags typically display as block elements by default, occupying 100% width within their parent container. By changing them to inline-block, it alters the width to be either a specified value or adjusts based on the content size if no fixed width is defined.

Answer 3

Answer №2

To add space above the image, simply use margin-top: 15px.

#references {
  width: 100%;
  padding: 25px;
}
#references h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0;
}
#references p {
  padding-right: 25px;
  font-size: 18px;
}
#references img {
  height: 50px;
  width: 50px;
  float: left;
  margin-top: 15px;
}

<div id="wrapper">
  <div id="references">
    <img src="http://vignette2.wikia.nocookie.net/dccu/images/b/bc/Icon-Wikipedia.png/revision/latest?cb=20160324075444">
    <h1>Our Company History</h1>
    <br>
    <p>Fair-Bau GmbH was established in April 2010 and specializes in executing structural building works, thermal insulation works, plastering works, and trading in construction materials. The company employs 15-20 workers.</p>
  </div>

Answer 4

To add space above the image, simply use margin-top: 15px.

#references {
  width: 100%;
  padding: 25px;
}
#references h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0;
}
#references p {
  padding-right: 25px;
  font-size: 18px;
}
#references img {
  height: 50px;
  width: 50px;
  float: left;
  margin-top: 15px;
}

<div id="wrapper">
  <div id="references">
    <img src="http://vignette2.wikia.nocookie.net/dccu/images/b/bc/Icon-Wikipedia.png/revision/latest?cb=20160324075444">
    <h1>Our Company History</h1>
    <br>
    <p>Fair-Bau GmbH was established in April 2010 and specializes in executing structural building works, thermal insulation works, plastering works, and trading in construction materials. The company employs 15-20 workers.</p>
  </div>

Position the image right beside the <h> heading

Answer №1

Answer №2

Similar questions

Parsing Images Using JSON and Ajax

Photo frame edge

Utilizing a live input from an HTML form in App-Script

Designing a feature to toggle between displaying and hiding different content sections

Show live updates in the input field

Similar title across various categories, retrieve link, Beautiful Soup in Python

Using a slider in Cordova application

Placing a list item at the beginning of an unordered list in EJS with MongoDB and Node.js using Express

Is there a way to align the image next to the form and ensure they are both the same size?

Attaching an SVG chart to a node causes it to malfunction, indicating a fundamental element is absent

Is there a way to automatically increase the width of a textarea?

Utilizing nested flex containers with overflow-x property

Having difficulty retrieving the initial selection value

Utilize a dynamic URL within the HTML audio element

Obtain the Week Input's Value

ideas for adding a button in the midst of several rows

Trouble with webpage design persists following recent modifications

Click here to open in a new tab and experience the ever-changing dynamic

Having Trouble with the Bootstrap Responsive Menu Button Not Working

React does not play well with Bootstrap's JavaScript and may cause it to not function or load properly