As I navigate through the challenges of using floats, I find myself back at square one. My goal is to have two divs of varying widths float to the right of my page. You can view the page I'm working on here: recipe page
Any assistance in understanding and mastering this would be greatly appreciated. I've included a screenshot of my intended layout: Thanks, Deborah
This is the current coding I have implemented:
<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>
<div style="clear:right;"></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 parsley.</li>
</ol><br>
<i>Submitted by Dirk R.</i>
<!-- End Page Content -->
</article>