CSS Float: Floating an image to the left of the text

Question

For each post box, I want the thumbnail to float to the left and the text to float to the right. I do not want the thumb to wrap around the text.

Here is my html code:

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

I've tried a few ways and still can't get it to work... the text won't show on the right...

Here's my CSS code:

.post-container{
    margin: 20px 20px 0 0;  
    border:5px solid #333;
}

.post-thumb img {
    float: left;
    clear:left;
}

.post-content {
    float:right;
}

thirtydot · Accepted Answer · 2011-03-04T19:53:33.167

Is this what you're after?

I changed your title into a h3 (header) tag, because it's a more semantic choice than using a div.

Live Demo #1
Live Demo #2 (with header at top, not sure if you wanted that)

HTML:

<div class="post-container">                
    <div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff" /></div>
    <div class="post-content">
        <h3 class="post-title">Post title</h3>
        <p>post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc </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%
}

Thanks for this. If I want the content of .post-content to align to bottom half of the post-thumb image, how do i do that? I cannot give height to '.post-content'. — Kiran Aghor, Oct 14 '12 at 04:52
what if i don't know the width of the image but now, `margin-left: 210px` on `.post-content` is there..! Is there a way to fix it without using js? — Saravanabalagi Ramachandran, Jan 19 '16 at 11:14
@ZekeDran: http://jsfiddle.net/RXrvZ/2474/, http://stackoverflow.com/questions/7189608/how-do-i-make-an-input-element-occupy-all-remaining-horizontal-space/7190310#7190310 — thirtydot, Jan 19 '16 at 12:07

score 4 · Answer 2 · answered Mar 04 '11 at 19:46

4

Just need to float both elements left:

.post-container{
    margin: 20px 20px 0 0;  
    border:5px solid #333;
}

.post-thumb img {
    float: left;
}

.post-content {
    float: left;
}

Edit: actually, you do not need the width, just float both left

answered Mar 04 '11 at 19:46

Demelziraptor

1,545
1
14
20

Make sure to have a div with clear:both underneath the #div.post-content as well. – Demelziraptor Mar 04 '11 at 19:53

score 1 · Answer 3 · answered Mar 30 '16 at 14:18

I almost always just use overflow:hidden on my text-elements in those situations, it often works like a charm ;)

.post-container {
 margin: 20px 20px 0 0;
 border:5px solid #333;
}
.post-thumb img {
 float: left;
}
.post-content {
 overflow:hidden;
}

Dutchie432 · Answer 4 · 2011-03-04T19:47:57.623

1

Check out this sample: http://jsfiddle.net/Epgvc/1/

I just floated the title to the left and added a clear:both div to the bottom..

edited Mar 04 '11 at 19:47

answered Mar 04 '11 at 19:40

Dutchie432

28,798
20
92
109

score 1 · Answer 5 · edited Sep 18 '17 at 14:09

.post-container{
    margin: 20px 20px 0 0;  
    border:5px solid #333;
    width:600px;
    overflow:hidden;
}

.post-thumb img {
    float: left;
    clear:left;
    width:50px;
    height:50px;
    border:1px solid red;
}

.post-title {
     float:left;   
    margin-left:10px;
}

.post-content {
    float:right;
}

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

jsFiddle

score 0 · Answer 6 · answered Mar 04 '11 at 19:40

0

Set the width of post-content and post-thumb so that you get a two-column layout.

answered Mar 04 '11 at 19:40

quarkdown27

658
8
15

score 0 · Answer 7 · answered Mar 13 '19 at 12:33

Solution using display: flex (with responsive behavior): http://jsfiddle.net/dkulahin/w3472kct

HTML:

<div class="content">
    <img src="myimage.jpg" alt="" />
    <div class="details">
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>

CSS:

.content{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.content img {
    width: 150px;
}
.details {
    width: calc(100% - 150px);
}
@media only screen and (max-width: 480px) {
    .content {
        flex-direction: column;
    }
    .details {
        width: 100%;
    }
}

CSS Float: Floating an image to the left of the text

7 Answers7

Linked

Related