How to Position an Image Left of Text Without Wrapping Using CSS Floats?

Using CSS Floats to Position an Image Left of Text

When designing a web page, you may encounter situations where you want an image to appear to the left of the text, without it wrapping around the text. Using CSS floats provides a solution for this.

HTML

In your provided HTML, there are three essential elements:

• .post-container: Contains the overall post box.
• .post-thumb: Contains the image you want to float left.
• .post-content: Holds the post title and description.

<div class="post-container">
    <div class="post-thumb"><img  src="/static/imghwm/default1.png" data-src="thumb.jpg" class="lazy" alt="How to Position an Image Left of Text Without Wrapping Using CSS Floats?" ></div>
    <div class="post-title">Post title</div>
    <div class="post-content"><p>post description...</p></div>
</div>

CSS

To achieve the desired layout, apply the following CSS properties:

• .post-container: Set overflow: auto to allow the content inside to extend beyond the container's boundaries.
• .post-thumb: Set float: left to float the image to the left.
• .post-thumb img: Set display: block to ensure the image displays in its own space.
• .post-content: Set a margin-left value greater than the image width (e.g., 210px) to position the text to the right of the image.

.post-container {
    overflow: auto;
}

.post-thumb {
    float: left;
}

.post-thumb img {
    display: block;
}

.post-content {
    margin-left: 210px;
}

Important Notes

• To avoid the image from wrapping around the text, ensure the margin-left value for .post-content is wider than the image width.
• If you desire a header at the top of the post box, consider using a

  tag within .post-content.

The above is the detailed content of How to Position an Image Left of Text Without Wrapping Using CSS Floats?. For more information, please follow other related articles on the PHP Chinese website!