dealing with floated element and images/specific blocks - css

Question

I am struggling a bit to get this to work.
If you look at the following JSFiddle:
http://jsfiddle.net/JUDXq/
Is there a way to make the image block sit nicely next to the red block without it moving underneath the red block AND still have other images further down to be 100% width?
The image is on purpose as wide as the parent element. If an image is bigger than its parent, we can use "max-width:100% " to make it resize. But if there is a float inside the parent taking space, is there a way to do this?
<div class="parent">
<div class="left">
</div>
<p>
Lorem ipsum dolor sit amet, non ut, hymenaeos urna mi odio, non ac libero, turpis curabitur ante ultricies proin egestas convallis. In bibendum mauris quis placeat. Fusce interdum id faucibus dictum id adipiscing, non et elit, vel hendrerit libero, nulla donec ornare lacus et lacus lectus. In tristique, mauris mauris adipiscing neque, donec libero nulla sem lacus, nibh arcu nu. <strong> I would like the image to go right below this text.</strong>
</p>
<div class="one">
<img src="http://placekitten.com/500/200">
</div>
</div>
.parent { width: 500px; height:1000px; }
.left {float:left; width:100px; height:200px; background:red; display:block; }
.one { background:blue; }
Image hosted by Placekitten and taken by: Pieter Lanser
Thanks guys

Answer 1

Is this what you're looking for? http://jsfiddle.net/LQxVE/1/
.parent { width: 500px; height:1000px; }
.left {float:left; width:100px; height:200px; background:red; display:block; }
.one { background:blue; }
img {
float: right;
width: 400px;
}
if I'm understanding your comment, this might be more suited: http://jsfiddle.net/LQxVE/2/
.one {
background:blue;
width: 80%;
float: right;
}
img {
max-width: 100%;
}