Results 1 to 2 of 2

Thread: Trouble Floating Divs

  1. #1
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    264
    Thanks
    71
    Thanked 2 Times in 2 Posts

    Default Trouble Floating Divs

    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:

    Code:
      <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/r...arcanapes.html

    Thanks,
    Deborah
    Last edited by dmwhipp; 06-25-2014 at 10:38 PM.
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  2. #2
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    264
    Thanks
    71
    Thanked 2 Times in 2 Posts

    Default

    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/r...arcanapes.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
    Last edited by dmwhipp; 06-25-2014 at 10:37 PM.
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

Similar Threads

  1. Replies: 0
    Last Post: 06-22-2014, 01:02 AM
  2. "Floating" divs that scroll with page, with special conditions.
    By prototism in forum Looking for such a script or service
    Replies: 6
    Last Post: 08-29-2010, 10:14 PM
  3. Replies: 1
    Last Post: 03-10-2010, 01:10 AM
  4. Floating divs probelm
    By sivlock in forum CSS
    Replies: 6
    Last Post: 03-04-2009, 10:44 PM
  5. Replies: 0
    Last Post: 09-24-2006, 12:27 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •