Implementing a vertical divider line in between columns with Foundation CSS

Here is the HTML code snippet:

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>


    <div class="card">
        <div class="card-section">
        <section class="row">
            <article class="columns small-8">
              Text Text Text Text
              Text Text Text 
              Text Text Text Text
              Text Text Text
              Text Text Text Text
              Text Text Text
            </article>
            <article style="border-left:1px solid #000;" class="columns small-4">
              Text
            </article>
        </section>
        </div>
        <div class="card-divider">
          <input type="checkbox">
          <label>Add to compare</label>
        </div>
      </div>

I need a vertical line between the columns that should extend from top to bottom of the card.

Adding border:... won't work due to padding in the card class.

Using an element with position:absolute isn't feasible as this page needs to be responsive and elements must adjust dynamically.

htmlcsszurb-foundation

Answer №1

My search for pre-made solutions turned up empty, so I decided to take matters into my own hands by creating a background image using the linear-gradient feature. By setting the background position as a percentage, I was able to make it dynamic. Here's how:

.card{
    background-color: #fff;
    background-image: -moz-linear-gradient(180deg, transparent, #ccc, transparent);
    background-image: -webkit-linear-gradient(180deg, transparent, #ccc, transparent);
    background-image: -o-linear-gradient(180deg, transparent, #ccc, transparent);
    background-image: linear-gradient(180deg, transparent, #ccc, transparent);
    background-position: 65%;
    background-repeat: repeat-y;
    background-size: 1px 1px;
}


<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>


    <div class="card" style="background-color: #fff;background-image: -moz-linear-gradient(180deg, transparent, #ccc, transparent);background-image: -webkit-linear-gradient(180deg, transparent, #ccc, transparent);background-image: -o-linear-gradient(180deg, transparent, #ccc, transparent);background-image: linear-gradient(180deg, transparent, #ccc, transparent);background-position: 65%;background-repeat: repeat-y;background-size: 1px 1px;">
        <div class="card-section">
        <section class="row">
            <article class="columns small-8">
              Text Text Text Text
              Text Text Text 
              Text Text Text Text
              Text Text Text
              Text Text Text Text
              Text Text Text
            </article>
            <article class="columns small-4">
              Text
            </article>
        </section>
        </div>
        <div class="card-divider">
          <input type="checkbox">
          <label>Add to compare</label>
        </div>
      </div>

Answer №2

New and improved answer with a pseudo element:

.card-section {
  position:relative;
  }
.small-4:before {
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  border-right:solid;
  margin-left:-0.75em;
  }
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>


    <div class="card">
        <div class="card-section">
        <section class="row">
            <article class="columns small-8">
              Text Text Text Text
              Text Text Text 
              Text Text Text Text
              Text Text Text
              Text Text Text Text
              Text Text Text
            </article>
            <article class="columns small-4">
              Text
            </article>
        </section>
        </div>
        <div class="card-divider">
          <input type="checkbox">
          <label>Add to compare</label>
        </div>
      </div>

Revise

You have the option to customize foundation CSS by eliminating float initially and then resetting display:

  • display:flex (ignores child floating)

.row {
  display:flex;
}
.row :last-child {/* The last cells are selected for demonstration purposes as they contain less content */
  border-left:solid;
 /* Demonstrative purposes: visible indication */
 background:lightgray
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>
  <div class="card">
        <div class="card-section">
        <section class="row">
            <article class="columns small-8">
              Text Text Text Text
              Text Text Text 
              Text Text Text Text
              Text Text Text
              Text Text Text Text
              Text Text Text
            </article>
            <article class="columns small-4">
              Text
            </article>
        </section>
        </div>
        <div class="card-divider">
          <input type="checkbox">
          <label>Add to compare</label>
        </div>
      </div>

  • display:table + float:none; because float impacts display :(

.row {
  display:table;
  width:100%;
}
.card .card-section .row > article.columns {
  display:table-cell;
  float:none;/* else display is killed */
}
.row :last-child {/* shortest chosen for demo, you could select first-child or .small-4 */
  border-left:solid;
 /* Demo purpose: see me */
 background:lightgray
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>
  <div class="card">
        <div class="card-section">
        <section class="row">
            <article class="columns small-8">
              Text Text Text Text
              Text Text Text 
              Text Text Text Text
              Text Text Text
              Text Text Text Text
              Text Text Text
            </article>
            <article class="columns small-4">
              Text
            </article>
        </section>
        </div>
        <div class="card-divider">
          <input type="checkbox">
          <label>Add to compare</label>
        </div>
      </div>

  • display:grid .... maybe in the future then flex will work efficiently with less CSS to write. Also, display:table is included for older browsers that do not support the flex model

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

Create a stylish bottom border exclusively for the text that has been wrapped

My goal is to create an underline that perfectly fits the width of the text on the bottom row, without extending beyond it. The desired effect is shown in Figure 1. Figure 1 Here is the HTML I am currently using: <h2><span class="inline-block"& ...

borderinlinecssunderline

Do you think it's achievable to modify the color using CSS's order attribute?

When I look at the code in Firefox's inspector, I notice this : element { order:35; } Can a color be assigned to it? I am customizing my year outlook calendar and have set a particular day to display in a different color. But when I click on the mo ...

htmlcsstags

Trouble with Unveiling the Secondary Accordion

I am having issues adding a second accordion next to the existing one. Even though the code is working fine in the tryit editor v3.6 online, it doesn't seem to display correctly for me. I have made sure that I am using the latest versions of all scrip ...

htmlcssbootstrap-4

filtering out specific sections of HTML using xPath

I am currently attempting to scrape information from this page My approach involves using xPath to select specific elements. Here is a snippet of my code: $safeFlag = true ; //*[@id="tabset_productPage"]/dd[1]/div/div //HAVE TRIED THIS TOO //*[@id="tab ...

phphtmldomxpath

Having trouble with the move_uploaded_file function in PHP?

I have been actively studying PHP and am currently working on a CMS project. I have encountered an issue with image uploading. PHP if ( $_POST['img']) $uploads_dir = '/images'; $tmp_name = $_FILES["img"]["tmp_name"]; $name = $_FIL ...

phphtmlmysqlfile-upload

Implementing CSS styles with jQuery

Looking for a way to dynamically add CSS attributes to different form elements like text fields, text areas, checkboxes, and dropdowns? There's also a separate block that lists possible CSS properties such as font, font-style, width, and padding. What ...

javascriptjqueryhtmlcss

Ways to crop a background image from the bottom left and right using CSS

I'm attempting to replicate the background image found at https://i.stack.imgur.com/nYDet.jpg My attempts to use clip-art on this image have been unsuccessful in achieving that shape. .hero-section { height: 740px; background: linear-gradient( ...

htmlcss

Unique button for custom "CODE" in Froala

Looking to create a custom button with functionality similar to bold (B) but for source code (Src). I have attempted the following, however it is not fully functional: $("#elm1").editable({ inlineMode: false, minHeight: 300, buttons: ["src"], c ...

javascripthtmlwysiwyg

I'm struggling to determine the correct path to use in the background-image: url(); CSS property to display a specific image within a Vue.js project

Currently, I am working on a Vue.js project and this is the structure of my file tree (showing only relevant folders and files): root src assets image.jpg components header.vue index.html Within the header.v ...

css

Quickly redesigning the appearance of file input using javascript and jquery. Seeking assistance to correct css issues on jsfiddle

Hey there, I've been working on styling the input[type="file"] element and could use some assistance. Like the saying goes, "One JSfiddle is worth 1000 words," so here's the link to my example: --- For more details, click here: http://jsfiddle.n ...

javascriptjqueryhtmlcsscss-float

What is the best way to display multiple divs in a single location?

I am facing an issue with displaying different text on mouseover for three buttons. I successfully implemented it for one button, but when I added the other two, it stopped working. Here is the code I used for the first button: Using jQuery- document.get ...

jqueryhtmlcss

Is there a way to align these side by side?

Is it a silly question? Perhaps. But I can't seem to figure out how to align my text and colorpicker on the same line instead of two. Take a look at my fiddle. I've tried removing display:block and clear:both, but that didn't do the trick. H ...

javascriptjquerycss

It is impossible for 4 div elements to align in a horizontal position

Having an issue where I am trying to align 4 boxes horizontally like cards, but they are appearing in a staircase formation instead. Any help would be appreciated. I have provided the code with the issue on this jsfiddle link #first { ...

htmlcssflexbox

"Can someone guide me on the process of transmitting data to a client using Node in combination with

I am new to web development and struggling to understand how to transfer data from the Node server to the client while also displaying an HTML page. I am aware that res.send() is used to send data, but I'm having difficulty maintaining the client disp ...

javascripthtmlnode.jsexpressweb-development-server

iPad not compatible with playing Mp4 videos offline

Having an issue with embedding an mp4 file on a webpage in iOS Safari. The video is embedded using the video tag: <video src='gizmo.mp4' width=560 height=320></video> However, instead of playing the video, the page shows the 'v ...

iphonehtmlcachingvideooffline

Arranging various JavaScript arrays

I've been working on a script using the Haversine formula, but I'm running into an issue where it always directs me to the first location in the array, no matter how many times I switch them around. Any suggestions? var locations = new Array( ...

javascriptarrayshtmlgeolocationhaversine

Can someone guide me on developing a similar design utilizing HTML canvas with HTML 5 technology?

Hey everyone, I could really use some assistance on creating a design with Html 5 canvas. My current issue is that the rectangles I'm trying to generate are overlapping and not fitting properly within the canvas. Below, you'll find both a referen ...

htmlcssreactjs

What is the best way to set up an external site iframe that utilizes PHP as a proxy on my web server without encountering CORS issues?

I came across a tutorial on using curl in php, and here is what I have implemented so far: index.html: <!DOCTYPE html> <html> <head> </head> <body> <iframe src="fetch.php" width="800" height="500"></iframe> </ ...

javascriptphphtmlcurlcross-domain

Encountering a problem within a Maven project during execution

Greetings, I am relatively new to maven and seeking some assistance. Recently, my Maven project has started displaying a 404 error on the browser when I attempt to run it. I initially created this Maven project using the webapp archetype and everything w ...

htmleclipsemaventomcat7

Modify the image inside a div when hovering

How can I create a product card that displays thumbnails of images when hovered over, and changes the main image to the thumbnail image? My current challenge is getting this functionality to work individually for each card on an e-commerce site. Currently, ...

javascripthtmljquerytwitter-bootstrap