An image spanning two columns on a page with three columns

I am currently utilizing Foundation 4 for my website design. I am attempting to create an image that spans over 2 columns in a 3-column layout using the Foundation grid system. Here is how I envision it:

https://i.sstatic.net/m7InR.jpg

I am wondering if it is possible to achieve this by nesting rows within each other. Below is the HTML code I have tried so far, but it is not producing the desired result:

<div class="row">
    <div class="large-4 columns">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
    </div>

    <div class="large-4 columns">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
    </div>

    <div class="large-4 columns">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
        <div class="row">
            <div class="large-8 columns pull-8">
                <div><img class="bild" src="myimage.jpg"></div>
            </div>
        </div>
    </div>
</div>
csszurb-foundation

Answer №1

Incorporating elements in Foundation follows a similar structure to Bootstrap. While your idea is valid, it is recommended to adhere to the coding practices that align with how Foundation was intended to be used.

To illustrate, consider this wireframe example: It is important to nest the rows within each other to establish the proper hierarchy.

<div class="row">
    <div class="large-4"></div>
    <div class="large-8">
        <div class="row">
            <div class="large-6"></div>
            <div class="large-6"></div>
        </div>
        <div class="row">
            <div class="large-12"></div>
        </div>
    </div>
</div>

Answer №2

After experimenting with different approaches, I have finally discovered a solution that works well for anyone facing the same dilemma. My method involves placing the image within ordinary div elements towards the end of the 2nd column. By setting the width of the image wrapper to 200% on screen sizes larger than 768px (while keeping the image itself at 100%), the visual outcome is consistent across all devices. It is crucial to upload an image with sufficient resolution - in my case, the image is 800px wide. Additionally, both the wrapper div and the image should be floated left on larger screens for optimal results.

If there are alternative solutions available, I am open to suggestions and would appreciate any input.

    <style>
  .bild img{
    width:100%;
  }

  @media only screen and (max-width: 767px){
  .bild{
    width:100%;
    margin: 20px 0px;
  }
  }
    @media only screen and (min-width: 768px){
  .bild{
    margin:20px 0px;
    float:left;
    width:200%;
  }
  }
    </style>
    <div class="row">
        <div class="large-4 columns">
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget 
           dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, 
           nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium 
            quis, sem. 
        </div>

        <div class="large-4 columns">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget 
          dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, 
          nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium 
          quis, sem. 

          <div class="bild"><img src="myimage.jpg"></div>
        </div>

        <div class="large-4 columns">
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget 
           dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, 
           nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium 
           quis, sem. 
            </div>
        </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

The utilization of CSS within Flask can sometimes lead to a state

Struggling with a python Flask issue here and could really use some help. My CSS is completely out of whack and not displaying correctly at all. Despite setting everything up in static_files and seeing only a 304 code in the terminal, even when trying new ...

pythoncssflask

Different CSS values can be applied for specific versions of Internet Explorer by using conditional comments

I am dealing with a CSS class named "myclass" that requires a z-index of 5 specifically for IE8. I have attempted to achieve this using the following methods: .myclass{ z-index: 5\9; } ---> Interestingly, this method applies from IE10 onwards a ...

htmlcssinternet-explorer

Ways to boost CSS transform with GPU acceleration

Is there a way to ensure smooth animations by utilizing GPU acceleration for CSS transforms in browsers? When does this acceleration occur and how can it be forced? For more information, check out this article ...

cssanimationtransformgpu

Having trouble with the Tooltip feature in Bootstrap versions 5.2 and 5.3 on my end

I've been working on building an HTML website using Bootstrap 5.2, and I followed the instructions in the Bootstrap documentation to add tooltips. However, I encountered an issue where the tooltips were not functioning as expected. When checking the ...

htmljquerycsstwitter-bootstrapbootstrap-5

Is it possible to create dynamic backgrounds using Twitter Bootstrap's responsiveness?

Is there a way to create a responsive image arrangement for backgrounds on a website? Imagine having different background images load based on various screen resolutions. Additionally, it would be advantageous to specify different behaviors such as having ...

javascriptcsshtmltwitter-bootstrap

"Endowed with improper dimensions, the BootStrap collapse feature

Yesterday, I posted about an issue with BootStrap and panel collapsables causing graph sizes to become distorted. The post was locked because there was no accompanying code. I have now created a code snippet for you all to see the exact problem I am facing ...

javascriptjquerycsstwitter-bootstraphighcharts

What is the process of displaying text within a link?

I have a basic webpage where I want the text to display from a link. Here is my website: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Encyclopedia</title> <link href="test.css" re ...

javascriptcsshtml

Creating a table with a static first column and vertical text positioned to the left of the fixed column

To create a table with the first column fixed, refer to this fiddle link: http://jsfiddle.net/Yw679/6/. You also need a vertical text to be positioned to the left of the fixed column in a way that it remains fixed like the first column. The disparities be ...

javascriptcss

The CSS display:block property isn't functioning as intended

I'm currently working on a contact form using CSS and HTML, but I'm having trouble getting the boxes to display properly in a 'block' form (display:block). HTML: <section class="body"> <form method="post" action="index.php ...

htmlcss

What is the process for assigning a value to the body in a div element?

Within a div, there is a body element structured like this: <div id = "TextBox1"> <iframe id = "TextBox1_1"> #document <html> <head></head> <body></body> </html> </iframe> </div> I have attempte ...

javascriptjqueryhtmlcss

Slideshow box with images aligned perfectly

I have designed a container with images, but my goal is to: either show the images inline or stack them on top of each other, and then be able to navigate through them using jQuery. I attempted absolute positioning on both .box and .box img, as well as u ...

htmlcss

The datepicker on mobile devices fails to display the default text of dd/mm/yyyy

This JSP code uses Bootstrap5: <form action="" method="GET" class="row g-1 mb-3 "> <div class="col-lg-2 col-md-4 col-6 mb-2"> <input type="date" class="form-control" name=" ...

htmlcssbootstrap-5

Transitioning CSS for transformative text effects

Is there a way to create an effect similar to the "HOVER ME" animation on a div? I want the text to move down and another text to appear from above when hovering over the div, without separate letters. The transition should be seamless and reversed when th ...

htmlcsssasshaml

Clone content upon pressing the Enter key

I am facing an issue with my editable container where I have a div inside it. Whenever I press enter, the div duplicates, resulting in two divs stacked on top of each other. The container has contenteditable set to true, which might be causing this problem ...

htmlcss

Creating a Standard DIV Element (JavaScript Code)

Just a quick question here. http://jsfiddle.net/fkling/TpF24/ In this given example, I am looking to have < div>Bar 1</div> open as default... Any suggestions on achieving that? That would be all for now. Thank you so much! :D The JS script ...

javascriptcss

Tips for reducing the height of the footer without compromising the alignment of the text within

My attempt to reduce the height of my footer in CSS using padding, margin, and other methods was unsuccessful. All of these adjustments either pushed the footer completely out of the bottom or left the text uncentered. footer { background: #fce138; wid ...

htmlcss

Explore the power of Infinity.js for optimizing the rendering of large HTML tables, complete with a detailed example using prototype

Is there a way to efficiently load/render large html tables without compromising performance, especially in Internet Explorer? I recently came across a plugin in prototype.js (https://github.com/jbrantly/bigtable/, post: , demo:) that addresses this issue ...

javascriptjquerycsshtml-table

Removing items from a JavaScript list

I am seeking assistance with an issue I am facing. I have a function that generates a list based on user inputs. For instance, when a user enters apples, the function adds it to a <ul> list. My concern is about deleting specific inputs from the lis ...

javascripthtmlcsslistappendchild

Styling the button in jQuery to switch between disabled and enabled

I'm currently working on creating a disabled/enable button style using jQuery. You can check out my demonstration page on Codepen for reference. In the demo, you'll notice a blue submit button. When you input text into the field, the button bec ...

javascriptjquerycss

Determining the browser width's pixel value to enhance responsiveness in design

Lately, I've been delving into the world of responsive design and trying to grasp the most effective strategies. From what I've gathered, focusing on content-driven breakpoints rather than device-specific ones is key. One thing that would greatl ...

javascripthtmlcssresponsive-design