Float 2 Divs To Right, One Atop The Other

Just when I think I'm beginning to get the hang of floats, I realize I'm clueless. I'm trying to the 2 divs of different widths to float to the right of my page here: recipe page I

Solution 1:

If you want to get the ingredients and directions below the picture, you should surround it with a

<div style="clear:both">
    <b>Ingredients</b>
    ...
</div>

Solution 2:

So after your comments, I think the problems is you have an extra closing div tag in your code here:

<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>

Remove it:

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=altogether"></script>
<!-- AddThis Button END -->
<br><br>


<b>Ingredients</b>
<ul>

Solution 3:

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