Float image to left of centered text

Question

I currently have some text that is left aligned but centered as follows:

<div class="center-text">There is some text here</div>
<div class="center-text">There is also some other text here</div>
<div class="center-text">Finally there is some text here</div>

.center-text {
    width: 50%;
    margin: auto;
}

How can I float an image to the left of the text that is in the bottom right corner? What I'm looking for is the following:

The black frame is the surrounding div, the red is the image and the text is as described above. My text is currently behaving as expected but I can't seem to add the image without impacting the text.

Answer 1

I made it a little bit different:

 .container{ height: 300px; position:relative; border: 30px solid black; } .center-text { width: 100%; } p { margin: 0; } img{ position: absolute; bottom: 0; left: 0; width:30%; } .text{ float: right; width: 65%; margin-top: 100px; } 

 <div class="container"> <div class="center-text"> <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRLwIM4lLwdmXvvYio988Z70kxTBtoNudITd9_72iGRjlusoVey" /> <div class="text"> <p>There is some text here</p> <p>There is also some other text here</p> <p>Finally there is some text here</p> <p>Finally there is some text here</p> <p>Finally there is some text here</p> </div> </div> </div> 

I hope it also helps you :)