How to Float an Image to the Left of Text Without Wrapping?

CSS Float: Floating an Image to the Left of the Text

In this scenario, you aim to achieve a layout where a thumbnail image floats to the left of text content, without the text wrapping around the image. Here's an enhanced explanation of how to achieve this using HTML and CSS:

HTML structure:

<div class="post-container">
    <div class="post-thumb">
        <img src="thumb.jpg">
    </div>
    <div class="post-content">
        <h3 class="post-title">Post title</h3>
        <p>Post description description description etc etc etc</p>
    </div>
</div>

CSS:

.post-container {
    margin: 20px 20px 0 0;  
    border: 5px solid #333;
    overflow: auto
}
.post-thumb {
    float: left
}
.post-thumb img {
    display: block
}
.post-content {
    margin-left: 210px
}
.post-title {
    font-weight: bold;
    font-size: 200%
}

Explanation:

• The .post-container contains both the thumbnail and text content.
• .post-thumb floats the image to the left of the container.
• Setting display: block on the image ensures it takes up the full width of the .post-thumb container.
• .post-content applies a margin-left of 210px to ensure there is enough space between the image and the text.
• .post-title formats the post title with bold and a larger font size.

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