How do I put text and an image side by side? - html

Question

I need to get my text and image to be next to each other on the same line, Without using tables. Float: left and right are not working.
<h1 id="profileHead">Connor Clarke - Lorem ipsum dolor sit amet.</h1>
<div id="profile">
<img id="profilePic" src="pictures/profilePicture.jpg">
<p id="profileDesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in justo libero. In dapibus vulputate augue at auctor. Aliquam sagittis odio quis magna ornare, at molestie neque mattis. Proin non orci ac arcu cursus tempus et ac purus. Nam aliquet.</p>
</div>
#profilePic { width: 300px; height: 300px; float: right;}
#profileDesc {float: left;}

Answer 1

There are several different ways I'd think up of solving this.
The solution that involves changing the width of #profileDesc does not display gracefully if the layout is too narrow (it breaks if 50% is less than 300px), so I don't recommend that one.
The recommendation of divy3993 works, but it's not the solution I'd think of, and it wouldn't be best in all circumstances--it depends what you want to do, how you want this to fit into the rest of your page.
You can achieve a similar effect by removing the one line in your css:
#profileDesc {float: left;}
And you will find it displays as you want.
Try adding a new p element, and you'll see different behavior (in the solution with the floated img outside the p, the subsequent p will continue to wrap alongside the image, in divy3993's solution, there will be a gap).
Another solution, yielding yet different behavior, is to use a containing div with position:relative, allowing you to use absolute positioning for the image, then add padding to the right side of the div so the content in it doesn't spill over onto the image. This can be useful if you want text or other content to continue down in a column that never gets wider than the image, useful if you want to put other stuff under the image in a separate column. To do this:
<h1 id="profileHead">Connor Clarke - Lorem ipsum dolor sit amet.</h1>
<div id="profile">
<div id="column">
<img id="profilePic" src="pictures/profilePicture.jpg">
<p id="profileDesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in justo libero. In dapibus vulputate augue at auctor. Aliquam sagittis odio quis magna ornare, at molestie neque mattis. Proin non orci ac arcu cursus tempus et ac purus. Nam aliquet.</p>
</div>
</div>
<style>
#profilePic { position: absolute; right: 0px; top: 0px; width: 300px; height: 300px; float: right;}
#column {position: relative; padding-right: 310px;}
</style>

Answer 2

You do not have to put your image inside the paragraph, you can do it without.
Here is a jsfiddle example
Your <p> is taking up 100% of the width, change your #profileDesc width to something like 50%. The <p> being 100% is forcing it to wrap.
#profileDesc {float: left; width: 50%;}
#profilePic { width: 300px; height: 300px; float: right;}

Answer 3

maybe use calc?
* {
padding: 0;
margin: 0;
}
#profile{
overflow: hidden;
}
#profilePic {
width: 300px;
height: 300px;
float: right;
margin-left: 20px;
}
#profileDesc {
width: calc(100% - 320px);
float: left;
}
<div class="b">
<img id="profilePic" src="pictures/profilePicture.jpg"/>
<p id="profileDesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in justo libero. In dapibus vulputate augue at auctor. Aliquam sagittis odio quis magna ornare, at molestie neque mattis. Proin non orci ac arcu cursus tempus et ac purus. Nam aliquet.</p>
<div style="clear: both"></div>
</div>