Image with float:right inside div with float:left [closed] - css

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I want to have a paragraph of text on the right hand side of my page. And floating up against it an image like in this picture.
My logic was to give "Left div" a float:left and a defined width, And give Right div a float:right and a defined width. Then give my image a float:right.
What I end up with however is the image appears to the right of the text. This doesnt make sense to me as the image is outside the defined width of the div its in.

Answer 1

here's the answer: http://jsbin.com/iCowUPo/1/edit
Screen Capture:
HTML:
<div class="main">
<div class="left">
<img src="http://placekitten.com/200/200" />
</div>
<div class="right">
</div>
<div style="clear:both;"></div>
</div>
CSS:
.main{
background-color:#eee;
width:500px;
height:300px;
overflow:auto;
}
.left{
width:300px;
float:left;
height:300px;
background-color:#aaa;
overflow:auto;
}
.left img{
float:right;
}
.right{
width:200px;
float:right;
height:300px;
background-color:#bbb;
}
Concept:
The trick is that if you float:right your image, you need to clear that float too. I did that by applying overflow:auto; to my left div which makes perfect sense.

Answer 2

Like this http://jsfiddle.net/XmWKw/?
The html:
<div class="main">
<div class="left">
<img src="http://placehold.it/200x200" />
</div>
<div class="right">blah blah blah</div>
</div>
The css:
.left {
float: left;
width: 79%;
margin-right: 1%;
}
.left img {
float: right;
}
.right {
float: right;
width: 20%;
}