Question

I’m trying to the push the images back to the left under the title. Only floating the description text to the right. I can’t seem to clear the image floats.

HTML:

<div class="title">System Displays</div>
<div class="description">Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. 
 <img src="http://dummyimage.com/400x200/000/fff" /> 
 Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </div>

CSS:

.title {    
width: 200px;
float: left;
} 

.description{    
width: 200px;
float: right;
} 

.description img {
float: left;
clear: both; 
}

The jsfiddle is clearer. I can’t insert any extra HTML. Thanks for any advice.

EDIT: And this [jsfiddle] is what I visually want to achieve. I’m not sure if position: relative; is appropriate though.

Answer 1

Your jsfiddle differs greatly from your example code. Here is the fixed jsfiddle demo.

.description img {    
    width: 200px;
    float: left;
} 

If you need .description to have a fixed width, you are going to need another solution. You can’t float something outside of its container box.

Here is an example of another method using absolute positioning.

.description img {
position:absolute;
top:25px; 
left:0;
width:200px;
}

Demo

Here is another method using relative positioning:

.description img {
    width:200px;
    position:relative;
    left:-220px;
    float:left;
    margin-bottom:-100px;
}

Demo