Trouble Floating Divs

[dmwhipp]

I'm having trouble trying to figure out how to float divs right with other content to the left.
Here's is my coding for that section of the page:


<article id="content">


<!-- Start Page Content -->

<div style="float:right; display:inline-block; width:270px; position:relative;">

<div style="display:inline; float:right; border:#cccccc 1px solid; padding:5px 20px 5px 5px;">
<div><a href="/pdf/recipes/apps/CaviarCanapes.pdf" target="_blank"><img style="float:left; padding:2px 10px 0px 0px;" src="/graphics/icon-print.gif" width="12" height="15" alt="Printable Christmas Recipes">Print Recipe »</a></div>
<div style="padding:0 0 5px 22px;">PDF file, 1 pg.</div>
</div>

<img src="/graphics/recipes/apps/CaviarCanapes.jpg" style="float:right; padding:20px 0px 10px 30px; width:250px; height:295px; clear:right;" alt="Caviar Canapes">
</div>


<a class="breadcrumb" href="/recipes.html">Christmas Recipes »</a> <a class="breadcrumb" href="/recipes/appetizers.html">Appetizers »</a>
<h1>Caviar Canapes with Salmon Butter</h1>

<div style="padding:0px 0px 30px 0px;">
<script type="text/javascript" src="/scripts/StarsRate/frontend/load.php?id=2&sid=0"></script>
</div>

<div class="addthispad">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_16x16_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_pinterest_share"></a>
<a class="addthis_button_tumblr"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=altogether"></script>
<!-- AddThis Button END -->
</div>
<br><br>


<b>Ingredients</b>
<ul>
<li>1/2 cup (1 stick) unsalted butter, softened</li>
<li>3 ounces smoked salmon, finely chopped (approximately 3/4 cup)</li>
<li>2 tablespoons fresh dill, chopped</li>
<li>pinch of pepper.</li>
<li>1 baguette (long, narrow loaf of French bread)</li>
<li>5-6 ounces caviar</li>
<li>parsley for garnishing</li>
</ul><br>

<b>Directions</b>
<ol>
<li>Soften butter by bringing it to room temperature. Mix butter, chopped smoked salmon, dill and pepper in bowl and stir well.</li>
<li>Slice bread on a slant and spread salmon butter on each piece. Top with caviar and garnish with a small sprig of parsely.</li>
</ol><br>

<i>Submitted by Dirk R.</i>


<!-- End Page Content -->

</article>

But for some reason, the page content (ratings, ingredients, instructions, etc.) are appearing below the photo to the right instead of to the left of it:

http://www.altogetherchristmas.com/recipes/appetizers/caviarcanapes.html

Thanks,
Deborah

[dmwhipp]

All of this was taking place in the article section of the code. I got it to work by wrapping the star rating and social sharing in a left-floating inline-block div and then wrapping the print box and photo in a right-floating inline-block div, and having the total widths of those inline-block divs match the article width. I added HTML comments so I can easily code other pages in this section with different width photos in the right-floating div: http://www.altogetherchristmas.com/recipes/appetizers/caviarcanapes.html

I'm not sure if this is the best way to do this, but it displays correctly in all major modern browsers and on my iPad. If anyone knows a better way to do this, feel free to share. But for now, it's working.
Thanks,
Deborah