HTML <div> and CSS Style - css

Question

I am trying to get a picture to be on the left side of the page with the text floating to right. I am using:
<div class="body">
<div style="float: left;">
<img src="me.png" height="310" width="350">
</div>
<p id="text"> BAJFS:LKJFKLJ##LKJLK#FJ##:LFKJ##:LFKJ##:LK#FJ:L#KFJ#:#LFKJ#:LFKJ##F:L#K#JF:#LFK J </p>
</div>
which I thought would make my image be on the left, with text floating to the right. The CSS I am using is:
.body
{
width: 880px;
margin: 20px auto;
background-color: #CFECEC;
padding: 10px 16px;
-moz-border-radius: 2px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 5px;
-webkit-box-shadow: 3px 5px 4px #000;
-moz-box-shadow: 3px 5px 4px #000;
box-shadow: 3px 5px 4px #000;
}
Can anyone help me have a picture on the left of this frame with text to the right?

Answer 1

I think the only reason that your text didn't float to the right cause it has no space inside. The paragraph's width is totally a difference cause they're all consecutive letters.

Answer 2

Your CSS works just fine. The problem lies in the text youre trying to wrap. You've got a single line with no spaces, therefore it simply doesnt fit next to the image, so it drops down below it.
Try the same code with different dummy text, and youll see that it works:
<div class="body">
<div style="float: left;">
<img src="me.png" height="310" width="350">
</div>
<p id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi mi, porttitor et rhoncus ac, aliquet vitae nunc. Phasellus nec eros vel lectus tempus placerat. Aenean lacinia euismod ultricies. In non ullamcorper urna. Donec nisi dolor, dictum eu facilisis sed, semper a lacus. Nulla dictum molestie tellus vitae ultricies. Etiam urna est, sodales et ultricies quis, vestibulum et lectus. Fusce iaculis cursus eleifend. Fusce venenatis est non nulla adipiscing condimentum. Aenean volutpat lectus est, at dictum nibh. Quisque facilisis purus et arcu dapibus at fringilla metus elementum. Integer consequat pellentesque auctor. Duis hendrerit feugiat diam vel lobortis. Nunc mauris leo, lacinia sit amet laoreet ut, auctor a arcu.
Aliquam dignissim rhoncus turpis, eget facilisis est blandit sed. Nunc quis nulla diam. Ut et quam nisl, a tristique mauris. Etiam ut quam in sem luctus pellentesque. Morbi viverra, odio ut tincidunt posuere, odio mauris egestas mi, non ornare arcu justo gravida risus. Sed odio leo, viverra ut tristique ac, imperdiet eu tortor. Nulla nunc nisl, pharetra eu ornare sed, aliquam quis lorem. Nunc pellentesque, libero eu venenatis laoreet, sapien augue ultricies sem, in facilisis nisi erat in odio. Suspendisse ullamcorper, risus at aliquam gravida, mi dolor adipiscing erat, ut tincidunt lacus urna sed leo. Cras posuere imperdiet velit, eu convallis velit ornare et. Praesent semper varius tortor, et malesuada sem malesuada quis. Mauris elementum sem ac ante aliquet faucibus et et nisi. Quisque id quam in dui varius egestas et eu diam. Fusce ultrices feugiat sapien.
In aliquam congue urna in scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin tortor eros, pellentesque id pharetra nec, interdum et tellus. In dapibus condimentum iaculis. Vivamus nec risus et ante blandit pretium non at tortor. Vivamus non sapien lorem. Phasellus ac nisi eget quam varius accumsan vel a ipsum. Phasellus mattis pellentesque auctor. Aenean risus mi, iaculis ut feugiat vel, pretium sit amet eros. Curabitur varius faucibus tempor.</p>
</div>

Answer 3

You can set width to your #text and float it right. Also you need set width to your images parent div. Add overflow: hidden; to .body to contain floated elements.
#text {
float: left;
width: 550px;
}
.figure { /* add this to your images parent */
float: left;
width: 350px;
}
.body {
...
overflow: hidden;
}