How to align these two elements inside a div - html

Question

I am having a little trouble aligning two elements inside a div (the quote and the arnold pic).
Here is what it looks like:
<div class="container">
<div id="quote">
<p id="tagline-quote">"As a personal fitness trainer, I'm asked on a weekly basis where the best place to buy supplements is, and my answer is always bodybuilding.com"</p>
<img id="q-image" alt="" src="http://www.cheapestsupplementsonline.com/wp-content/uploads/2012/03/arnold_schwarzenegger.jpg"></img>
</div> <!-- end #quote -->
Here is the css:
.container {
margin: 0 auto;
position: relative;
text-align: left;
width: 960px;
}
#quote {
padding: 60px 400px 20px 13px;
text-align: center;
}
p#tagline-quote {
color: #777676;
font-family: Georgia,serif;
font-size: 20px;
font-style: italic;
line-height: 30px;
text-shadow: 1px 1px 0 #FFFFFF;
}
#q-image{
}

Answer 1

This is a textbook "css floats 101" question. Oh, wait, I thought that was original but that's exactly what the article on alistapart is called. You can position the image inside the quote/paragraph and float it right - that's pretty much what the floats were made for before semantic layouts took over :)
<div class="container">
<div id="quote" class="clearfix">
<img id="q-image" alt="" src="http://www.cheapestsupplementsonline.com/wp-content/uploads/2012/03/arnold_schwarzenegger.jpg" />
<p id="tagline-quote">“As a personal fitness trainer, I'm
asked on a weekly basis where the best place to buy supplements is,
and my answer is always bodybuilding.com”</p>
</div>
</div>​​​​​​​​​​​​​​​​​​​​​
For CSS, I've thrown out some of the original padding :
#q-image{
float:right;
/*add some margin so that there is space between text and photo*/
margin-left:10px;
}
Now the issue that you were having with KodeKreachor's code was seemingly incorrectly "garbling" the divs below and you probably saw the quote container looking shorter than it should be. The workaround is using a "clearfix" that expands the parent container so that the floated element can fit inside. Remove it from the code and see how the (temporarily) highlighted container acts.
On a side note... try adding more paragraphs and move the image into one of them. Now that "odd" behaviour makes perfect sense - paragraphs start flowing nicely around that floated image without massive gaps.
Fiddle: http://jsfiddle.net/EvdV8/ Also: proper quotes. Also: img is a self-closing element so original markup was not valid.

Answer 2

If you're talking about side-by-side, you use a combination of "float: left;" and "display: inline-block" to force them next to each other.
.container {
margin: 0 auto;
text-align: left;
width: 960px;
}
#quote {
padding: 60px 400px 20px 13px;
text-align: center;
display: inline;
}
p#tagline-quote {
color: #777676;
font-family: Georgia,serif;
font-size: 20px;
font-style: italic;
line-height: 30px;
text-shadow: 1px 1px 0 #FFFFFF;
position:relative;
width:400px;
display: inline-block;
}
#q-image{
position:relative;
float: left;
}