Position 2 divs to the right, with one on top of the other

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 &#187;</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 &#187;</a> <a class="breadcrumb" href="/recipes/appetizers.html">Appetizers &#187;</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>

Answer №1

To access the list of ingredients and directions situated beneath the image, it is recommended that you enclose it within a

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

Answer №2

Upon reviewing your feedback, it appears that the issue lies in an extra closing div tag within your code:

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

To resolve this issue, simply remove the extraneous closing div tag:

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

Answer №3

Within the realm of the article section in the code, I successfully managed to make it function by enveloping the star rating and social sharing elements in a left-floating inline-block div, while encapsulating the print box and photo in a right-floating inline-block div. Ensuring that the total widths of these inline-block divs matched the width of the article was key. To facilitate future coding for other pages with varying photo widths in the right-floating div, I included HTML comments for reference:

While uncertain if this method is optimal, it renders correctly across all major modern browsers and on my iPad. If there is a more efficient approach, I welcome any suggestions. Nevertheless, for the time being, it is functional. Thank you, Deborah

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exclude certain labeled posts from appearing on the homepage of a Blogger website

I am managing a website dedicated to the best WhatsApp status on my blogger blog. I am in search of a way to conceal certain category posts from appearing on the homepage using coding techniques. Despite extensive research, I have been unsuccessful in fi ...

Tips for incorporating inline images with gatsby-image

Seeking Solution In my quest to query and showcase images with a maximum width of 350px, I am hoping to have them displayed inline-block for tablets and larger screens. Ideally, each image would sit next to one another and wrap if they exceed the parent d ...

What steps should I follow to customize the Bootstrap link template according to my requirements?

In the bootstrap documentation, the links are shown in blue by default. I want them to be white instead. How can I make all the links white if the documentation is ignoring my CSS files? ...

Show information according to the user's input

I am working on a page layout that includes two columns: Side and Middle. Within the side column, there is a form containing a date input and a button labeled "View Summary Report." Upon selecting a date and clicking the button, the goal is to retrieve d ...

When table cells are added dynamically, they are not encompassed by the solid fixed title bar when scrolling

My webpage has a fixed title bar with a high z-index that overlaps all other elements on the page when they are scrolled up, except for the dynamically created table cells. What attributes or styles do I need to set in order to hide the table cells behin ...

Is there a way to simulate pressing a keyboard button using jQuery?

Below is the code snippet: $("input").on({ keydown: function(ev) { if (ev.which === 27){ // esc button backspace_emolator(); } else if (ev.which === 8){ // backspace button console.log('backspace button ...

What could be causing my website to function flawlessly in Firefox but not in Chrome or Internet Explorer?

Hey everyone, I'm feeling lost and have been comparing files using DiffNow. I don't have any code to offer because I'm unsure of where to even begin. The website is coded in php/html/mysql/jquery. Here are my main concerns: -Animations are ...

Guide to displaying API data in HTML format

This university assignment involves working on a homework project where I need to utilize a public API in HTML. So far, I have successfully called the public API to display a list of radio channels in the left menu (without adding any click functionality). ...

What is the best way to enlarge the text in an image input field?

One of the input fields I'm working with looks like this: <input type="image" name="submit" value="submit" src="images/searchb1.png" id="button1"/> I am trying to figure out how to enlarge the text Submit on that field using CSS. Any suggestio ...

Vue Checkboxes - Maintain selection unless a different checkbox is selected

I have implemented a checkbox system with radio button behavior, but I am facing an issue where I want to keep the checkbox checked until another checkbox is selected (which will then uncheck the first one). I do not want the ability to deselect the checkb ...

Task: Choose MySQL option and Retrieve JSON data

I have a question regarding implementing a function in a separate module file and calling it within a route to retrieve query data: function getSobre() { return new Promise((resolve, reject) => { db.query(`SELECT * FROM sobre ORDER BY cod ...

Adjusting the height of a table cell in HTML: td without making it

Here's the issue I'm facing: I have an HTML <table> with a fixed height of 100px and no border. Inside this table, there is one row (with a 100% height) containing 5 td elements (each also with a height of 100%). Within each td, there is a ...

Is there a way to access an HTML element using Vue's methods?

Here is an example of my Vue component structure: <template> ... </template> <script> export default { methods: { buildDescription () { if (!this.description) { const div = document.createEl ...

What is the best method for linking my chatbot's user interface to the API.AI server host using either the Python SDK or JavaScript

Looking for a way to seamlessly integrate my chatbot UI, created using HTML and CSS, with the API.AI server using the token provided by API.AI and Python SDK? Below is the HTML code snippet for reference: <!DOCTYPE html> <html> <head> ...

Aligning Checkbox Labels for Web Forms

Can an image convey more than a thousand words? I'm looking to align the second (and following) lines with the first one. Any suggestions? Html stands for <input><span>text</span> ...

What are the best methods for preventing scss styles from leaking between pages?

I'm currently working on a project that includes the following files: /* styles/1.scss */ body { /* Some other styles not related to background-color */ } /* styles/2.scss */ body { background-color: blue; } // pages/one.js import "../styles/ ...

Ensuring Input Accuracy with jQuery Form Validation

I have implemented a form validation code that is currently functioning correctly. Below is the snippet of the code I used: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script ...

Issue with closing collapsed menu on click in Bootstrap version 3

Here is the code snippet: <li> <a href="#" id="statics" class="main-bar"> <span class="glyphicon glyphicon-stats" aria-hidden="true"></span> </a> </li> I am trying to toggle the responsive menu on eleme ...

Round Loading Animation in CSS

I spent hours scouring the internet for a solution on how to create basic CSS circle shape loaders, but couldn't find anything straightforward. I am working on a special website project that requires displaying survey results in dynamic percentages th ...

What is the best way to deactivate unclicked href links within a loop?

https://i.sstatic.net/sUufY.png Looking at the template image, my goal is to disable all links that were not clicked when one of the links from 'number1' to 'number3' is clicked. For example, if 'number2' is clicked, then &ap ...