To get your favorite places content and Facebook link sitting next to the image without layout chaos, we’ve got two solid options—Flexbox (modern, hassle-free) or Float (traditional, tried-and-true). Here’s how to implement both:

Option 1: Flexbox (Recommended) #

Wrap the image and text content in a container div, then use flexbox properties to align them side-by-side with spacing.

Modified HTML Code #

<h1>Misho the Boss</h1>
<p>Hi, I'm a cat. Meow!</p>
<div class="content-container">
  <img src="Misho.jpg" alt="Misho the Cat">
  <div class="text-content">
    <h3>Some of my favorite places:</h3>
    <ul>
      <li>My Chair</li>
      <li>The Couch</li>
      <li>The Car Maybe!</li>
    </ul>
    <p>Make sure to visit my <a href="http://www.facebook.com">facebook</a> page.</p>
  </div>
</div>

Modified CSS Code #

body { background: lavenderblush; }
h1 { font-family: Berkshire Swash; }
p, li, h3 { font-family: Gloria Hallelujah; }
h3 { font-size: 20px; }

/* Flexbox container to align items */
.content-container {
  display: flex;
  gap: 30px; /* Adds 30px spacing between image and text */
  align-items: flex-start; /* Keeps items aligned at the top */
}

/* Optional: Prevent image from overflowing */
.content-container img {
  max-width: 300px;
  height: auto;
}

Option 2: Float (Traditional Approach) #

If you prefer using floats, add a float property to the image and adjust margins for spacing. Don’t forget a clearfix to avoid layout issues later.

Modified HTML Code #

Same as the Flexbox option (wrapping in a container makes cleanup easier).

Modified CSS Code #

body { background: lavenderblush; }
h1 { font-family: Berkshire Swash; }
p, li, h3 { font-family: Gloria Hallelujah; }
h3 { font-size: 20px; }

/* Float image to the left */
.content-container img {
  float: left;
  margin-right: 30px; /* 30px spacing to the right of the image */
  max-width: 300px;
  height: auto;
}

/* Clear float to prevent container collapse */
.content-container::after {
  content: "";
  display: table;
  clear: both;
}

Quick Tips: #

• Flexbox is the better choice for modern layouts—it handles alignment and spacing without messy hacks.
• Adding alt text to your image helps with accessibility.
• Setting max-width on the image ensures it doesn’t break the layout on smaller screens.

内容的提问来源于stack exchange，提问作者Saoud ElTelawy