Search code examples
csshtmlalignmentcss-floatcss-position

Title is displayed above floated image instead of to the right of it

I have an article that contains a title (h4), an image that is floated left and some text.

  • When the title precedes the image in the HTML declaration, it is displayed above the image.
  • When the image precedes the title, the title is displayed to the right of the image.

Here is the HTML:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    img {
      margin: 1em;
      border: 1px solid black;
      float: left;
    }
  </style>
</head>

<body>
  <article id="a1">
    <h4>Title is above image</h4>
    <img src="images/about.jpg" alt="about" /> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
    it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </article>
  <hr/>
  <article id="a2">
    <img src="images/about.jpg" alt="about" />
    <h4>Title is to the right of image</h4>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </article>
</body>

</html>

The HMTL above is rendered as can be seen below:

This produces the page below

How can I use CSS to render the title to the right of the image when the title precedes the image in HTML ? I am looking for a solution where the HMTL is not changed in any way.

Solution

  • The natural thing would be to change the markup - here is a clumsy hack using positioning and negative margins (assuming the image width is fixed) - see demo below:

    article {
  clear: both; /* clear the float after each article - this is important */
}

img {
  margin: 1em;
  border: 1px solid black;
  float: left;
}

#a1 {
  padding-top: 30px; /* put some space at the top */
}

#a1 h4 {
  position: absolute; /* positione the title in that space*/
  left: 240px;
  top: -10px;
}

#a1 img {
  margin-top: -15px; /* shift the image to the top */
}
    <article id="a1">
  <h4>Title is above image</h4>
  <img src="https://via.placeholder.com/200" alt="about" /> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
  of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
  Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</article>
<hr/>
<article id="a2">
  <img src="https://via.placeholder.com/200" alt="about" />
  <h4>Title is to the right of image</h4>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.
</article>