Additional section for positioning beyond designated spot

If you want to understand better, take a look at this link:

Here's the scenario: I have one article with 2 CSS columns. In the first column, there is text and images for the article, while in the second column, I want to place aside elements like text or images that resemble newspaper sidebars.

Using Zurb Foundation, I created a row with two columns. The article goes into the first column, and I want to add asides in the second column but only after a specific point.

For example:

Lorem ipsum dolor sit amet, 

consectetuer adipiscing elit, 

tincidunt ut laoreet dolore [here]

magna aliquam erat volutpat.

The goal is to place the aside content after the specified point marked by "[here]" from the first column.

So, my question is, can we achieve this with a two-column layout using Zurb Foundation where elements are added to the second column based on points specified in the first column?

htmlcsszurb-foundation

Answer №1

If you're looking for a simple and reliable way to achieve predictable responsive design while connecting an aside to a specific paragraph, consider creating a separate row for each paragraph.

For an example, check out this jsFiddle: http://jsfiddle.net/vr4C2/1/

<div class="row">
  <div class="large-6 columns">
     <p>Information related to the aside</p>
  </div>
  <div class="large-6 columns">
    <h5>Aside Content</h5>
    <p>Details for the aside section</p>
  </div>
</div>

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

Leveraging the Angular (2) routerLinkActive directive to handle dynamic routes

Although my current approach works, I believe there may be a more efficient way to implement this in Angular. The situation is as follows: Imagine nested, inflected paths like /logos and /logo/:id The markup below functions as intended: <li class ...

javascripthtmlangulartypescript

Animate CSS backward when hovered

I am having trouble with getting an animation to play in reverse when hovering over an element. No matter what I try, it just snaps back to the beginning without any smooth transition. Interestingly, this issue only occurs in Chrome and Safari browsers. ...

csscss-animations

Creating line breaks in Bootstrap input group formatting

My issue involves rows with checkboxes and labels, some of which are longer than others. When the browser is resized or viewed on a mobile device, the columns containing longer labels collapse to a second row while shorter labels stay beside their checkbox ...

htmlcsstwitter-bootstrap

Flexbox: Distribute remaining space evenly while allowing content to wrap

Is there a method to instruct flexbox items to occupy the available space while wrapping as soon as they become smaller than their content? However, some items have a fixed width percentage. HTML <div class="grid"> <div class="grid__item"> ...

cssflexbox

View / Conceal Unordered List depending on link selected

How can I dynamically show or hide UL elements based on the clicked link? Here is a JS Fiddle example: http://jsfiddle.net/zangief007/rj8g0yh4/1/ Below is the HTML code: <ul class="category-1 group"> <li class="name">JOHN Smithe QC</l ...

javascriptjqueryhtml

Identifying the moment when attention shifts away from an element

Is it possible to detect when focus occurs outside an element without relying on global selectors like $(document), $(body), or $(window) for performance reasons? If achieving this without global selectors is not feasible, provide a provable reason expla ...

javascriptjqueryhtmlcss

The href attributes are not being retrieving correctly

I'm currently working on extracting the URLs for each restaurant listed on this page and have developed a Python script for this purpose: import time from selenium import webdriver from selenium.webdriver.common.keys import Keys browser = webdriver ...

pythonhtmlseleniumselenium-webdriver

The text and links should appear transparent against a gradient background; however, they are displaying in white

I am currently facing a small issue while working on my new website, www.dvpwebdesign.com. The problem arises in Internet Explorer (IE) when the intro page displays a repeated gradient background with text and links overlaid on it. While the layout works ...

htmlcss

Custom div element obstructs information window on map due to lack of auto panning feature

I created a unique div that is absolutely positioned on a Google Map. You can view the image below to see it. My issue is that the info window is being covered by this custom div element, as demonstrated in the picture. https://i.stack.imgur.com/1TgyQ.jpg ...

javascripthtmlcssgoogle-maps

Get rid of the spaces in web scraping <tr> tags using Node.js

I've encountered a problem that goes beyond my current knowledge. I'm attempting to web-scrape a specific webpage, targeting the <tr> element in nodejs. Although I can successfully retrieve the content, it seems that the format is not as cl ...

javascripthtmlnode.js

Are there any CSS selectors similar to :empty that can match elements with children that have display:none?

Looking for a solution to the issue stated in the title, this code snippet is causing some trouble: .group { width: 100px; height: 100px; background-color: blue; } .group:empty { background-color: red; } .hideme { display: none; } <div cl ...

htmlcsscss-selectors

The pause button will still function, even if the scrolling feature is enabled

I've successfully implemented a feature that pauses and plays the video on scroll when it reaches a certain pixel height. However, I'm facing an issue where the code automatically plays the video whenever the scroll position is more than 13500px ...

javascriptjqueryhtmlcss

Problems with select box rendering in Internet Explorer with Materialize CSS

When using materializecss select box in Internet Explorer 9 or higher, scrolling with the mouse button is not working. You must click on the scroll bar inside the select box for it to scroll. This issue does not occur in other browsers. I have attached a s ...

javascriptjqueryhtmlcssmaterial-design

Code snippet in Python using Selenium where Google Maps is not visible in the page source

Currently, I am attempting to extract GPS coordinates data from a property listing: https://www.primelocation.com/new-homes/details/55357965?search_identifier=d10d089a335cc707245fb6c924bafbd2 The specific GPS coordinates can be found on the "Map & Nearby" ...

pythonhtmlseleniumweb-scraping

What is the best way to open an already existing tab in Safari using an HTML 'a' link?

Is it possible to return to Safari after launching another app? <a href="webbrowserapp://example.com/open?url=http.....">Open WebBrowserApp</a> I've tried using: <a href="safari://">Return to Safari</a> It would be ideal if ...

javascripthtmliosiphoneipad

continuously repeating css text animation

How do I create an animation loop that slides infinitely, repeating non-stop in full screen without breaking at 'hello5'? I want to display 3 rows of the same item from my items array. Not sure which CSS is causing the issue. The result I am loo ...

htmlcssvue.js

What is the best way to create a dynamic textbox or label within a specific div class?

I need assistance with my dynamic asp.net page where I am generating labels and text boxes in a form. Is there a way to ensure that these elements are generated within a specific div class? Below are the relevant code snippets: for (int i = 0; i < cou ...

c#htmlcssasp.net

Styling Borders with CSS in Electron's WebView Component

Is there a way to add border radius to Electron's <webview> tag? If not, is there a list of supported styles available? HTML <body> <aside> </aside> <main> <webview id="view" src="h ...

htmlcsswebviewelectron

What is the method to empty input fields after data has been submitted in an Angular application?

    I'm facing a challenge with my web form. I have a dropdown menu using mat-select and an input field. When I click the submit button, the data is sent. However, I want the input field to clear after submission without affecting the mat-select dr ...

htmlangular

What is the process for displaying a PHP array in HTML5 audio and video players?

I am currently working with two PHP arrays. The first array, array "a," contains strings that represent paths for MP3 files on the server. The second array, array "b," contains strings representing paths for MP4 files. For example: $test = 'a.mp3&ap ...

javascriptphparraysjsonhtml