Breaking the border between columns in CSS columns

To see a demonstration of my question, please check out this fiddle.

In short, I am seeking a solution for making the purple border extend to the height of the green border, overlapping it. I am open to any creative solutions and hacks.

Specifically, within the <section> box of this application, there is a dynamically populated <ul> with varying amounts of items. The client-approved design includes a space in the top-border between columns due to the changing number of items in the list. I am trying to avoid using floated <div>s for columns. While I have successfully made the vertical borders purple for visualization purposes, I am unsure if it is possible to make these borders overlap the parent's outer border.

Last edited for clarity on 2015-09-27 at 17:29 UTC-5

htmlcss

Answer №1

It seems that the "column-rules" property family may not provide the exact solution you are looking for. Personally, I suggest trying something similar to the example in the code snippet below. While it may not be the most semantically optimized solution, it can help manage the number of columns effectively.

If you are comfortable working with PHP, you could consider dynamically adjusting the number of columns based on your data before rendering the page. Alternatively, a simple JavaScript function could handle the column formatting for you :)

/* CSS code snippet */
.row {
  width: 90%;
  margin: auto;
}

.row > .col {
  float : left;
  width: 30%;
}

.col > ul {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    padding: 1em 0 1em 2em;
    border-top: solid 4px #88d0cd; 
    border-bottom: solid 4px #88d0cd; 
}

.col:first-child {
  border-left: solid 4px #88d0cd;
}

.col:last-child {
  border-right: solid 4px #88d0cd;
}

.col:not(:last-child) {
  border-right: solid 4px #FF00FF;  
}

.col:not(:last-child) > ul {
  border-right: none;  
}
<html>
  <head>
  </head>
  <body>
    <section class="row">
        <div class="col">
          <ul>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
          </ul>
        </div>
        <div class="col">
          <ul>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
          </ul>
        </div>
        <div class="col">
          <ul>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
          </ul>
        </div>
    </section>
  </body>
</html>

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

Intrusive JQuery Code Incorporating Itself into SharePoint 2010's HTML Markup

There seems to be an issue with my content editor web part wherein the menu, which is clickable and hoverable due to the jQuery installed, is causing some unexpected behavior. Whenever the menu is clicked or hovered over, it changes the content in the adja ...

jquerycsssharepoint-2010

Template not found: Error encountered in nodemailer-express-handlebars: ENOENT: The specified file or directory does not exist in the node

I've been attempting to utilize nodemailer and express-handlebars in my node.js application to send a template form. However, I keep encountering the "no such file" error. Unfortunately, I have no clue what I'm overlooking or missing. Here is m ...

htmlnode.jsexpressnodemailerexpress-handlebars

Contrasting box-shadow behavior observed in Chrome versus Firefox

I'm working on a project and aiming to achieve this design: https://i.stack.imgur.com/YflaU.png To test it out, I created a sample page with the following code: p { display: inline; background-color: yellow; box-shadow: 10px 0px 0px red, -1 ...

css

Tips for positioning an asp.net Button alongside other elements in a form by making use of Bootstrap styling

Looking to revamp the style of my ASP.NET Web Forms project with the latest version of Bootstrap. Having trouble aligning an ASP.NET Button control horizontally with other controls in the form, as seen in this snapshot: https://i.sstatic.net/IVRKo.png Her ...

htmlcssbootstrap-4webforms

D3: Ensuring Map is Scaled Correctly and Oriented Correctly

I am attempting to integrate a map into a website using D3 and topoJSON that resembles the following: However, when I create the map with D3/topoJSON, it shows up small and inverted. Even after exploring various solutions (like Center a map in d3 given a ...

javascriptcssd3.jsgeojsontopojson

changing the visible style of a div element using JavaScript

I'm having an issue with a link on my webpage that is supposed to show or hide a <div id="po" style="display:none;">some html</div> element. The first time I click the link, the div displays properly. However, after tha ...

javascripthtmlcss

Prevented: Techniques for providing extra cushioning for a button, but with the condition that it contains an external icon

How can I apply padding to a button only if it contains an external icon? If the button has an external icon, I want to give it padding-right: 30px (example). However, if there is no external icon present, then the button should not have the 30px padding. ...

javascripthtmljquerycsscss-selectors

Using Jquery Chosen Plugin to Dynamically Populate One Chosen Selection Based on Another

Good evening to all, please excuse any errors in my English. I have successfully integrated a jQuery Chosen plugin with my 'estado' field (or province). My goal is to populate another jQuery Chosen plugin with the cities corresponding to that s ...

javascriptjqueryhtmlajaxjquery-chosen

Tips for designing a horizontal sub-navigation menu using CSS?

I have limited experience with list menus and am struggling to create a horizontal submenu with its own styling. Despite multiple attempts, I have been unsuccessful in finding a solution and have put the project on hold for now. Here is what I currently h ...

cssmenudrop-down-menu

Error: Code cannot be executed because the variable "sel" has not been defined in the HTML element

Every time I try to click on the div, I encounter an error message stating 'Uncaught ReferenceError: sel is not defined at HTMLDivElement.onclick' I am currently developing with Angular 8 and this error keeps popping up. I have read through simil ...

javascripthtmlangulartypescriptangular8

How can I use Vue.js @scroll to create a dynamic CSS property?

I am developing a vuejs component for my project and I am looking to implement a zoom functionality on scroll within a div, similar to Google Maps. <div @scroll="zoomOnScroll"> <Plotly :data="info" :layout="layout" :display-mode-bar="false"&g ...

cssvue.js

Navbar in bootstrap appears to be flashing when it is in its expanded

Example Link On smaller screens, the bootstrap navbar menu does not collapse by default when clicking on a menu item. To fix this issue, I added attributes data-toggle="collapse" and data-target="#navbar-collapse" to each menu item so that the menu will ...

javascriptjquerycsstwitter-bootstrapnavbar

Looking to have the content aligned in the center of the parent container while also

Below is the code snippet I am working on, which utilizes Bootstrap 4: .resource{ border:1px solid red; } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxP ...

htmlcssbootstrap-4

Adding variables to a div using jquery

Is there a way to use jQuery to append variables to a div? Below are my codes, but I am looking to display div tags in the append. For example: .append("" + p + "") var image = item.image; var label = item.label; var price = item.price; ...

javascriptjqueryhtmlcssfrontend

Achieving a 100% height sidebar that remains visible on the screen at all times in Bootstrap

Looking to achieve this specific layout: I want the left col-md-3 to maintain a consistent 100% height and always be visible on the screen - it's going to be a menu. The right side should function normally with scrolling capabilities. Appreciate any ...

csstwitter-bootstrap

Utilizing the "row" and "column" attributes in Angular (Flexbox) results in significant spacing between input fields within the HTML code

I'm working on aligning 2 input fields side by side within the same line. To achieve this, I've been utilizing Flexbox. However, I've observed that when using Flex with both 'row' and 'column', it introduces extra spacing ...

htmlcssangular

How to Vertically Center an Image in a Row using Bootstrap

I've been struggling for a while to properly center this image within the row that contains the div with the image. Here is the HTML code I am using: <div class="row"> <div class="col-md-9"> <div ...

htmlcsstwitter-bootstrap

Bring in a video file in order to watch it on your web page (HTML)

Is there a way to upload and play a video file using the video element? I am looking to add a video file to my webpage that can be played using a video element. <input type="file"> <h3>Video to be imported:</h3> <video width="320" ...

javascripthtml

What is the method for obtaining the div ID's from this form?

This is the scenario I am working on: my app takes the text inputted by the user and exports it to a specific website that contains similar elements. For example, if the user enters a title in the app and clicks a button, the app will transfer that value t ...

javascriptjavajqueryhtmlecmascript-5

Requesting an image from the live website using a GET method

Recently, I registered a domain for my personal website. While the site is still a work in progress, I noticed that the logo image fails to display when viewed through the browser on the site. Surprisingly, it shows up perfectly fine when accessed via loca ...

htmlcssftp