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

Add distinctive formatting for the final element that is not the last child

Presented with a fascinating challenge, I find myself with an ever-changing number of .child.red children. I am in need of referencing the last .child.red element dynamically using styles. Although I have attempted to achieve this on my own, I am curious a ...

javascripthtmlcss

BeautifulSoup: A guide on retrieving information following a designated HTML element

I have the following HTML code and I am trying to determine how to instruct BeautifulSoup to extract the <td> data after the element <td>Color Digest</td> <tr> <td> Color Digest </td> <td> 2,36,156,38,25,0, ... ( ...

pythonhtmlbeautifulsoupscrape

What is the best method for aligning buttons in a row with all the other buttons?

I have been attempting to display two buttons, id="strength" and id="minion", when a certain button, id="expandButton", is clicked. I want these two buttons to be positioned on either side of the button that triggers their cre ...

javascripthtmlcss

Eliminate the link outline in p:tabView

How can the outline be removed when a user clicks on one of the tabs in <p:tabView>? Attempts to set it in CSS were unsuccessful. a { outline: 0 none !important; } Shown below is a screenshot of the issue. ...

cssjsfprimefaces

Stop the content inside a div box from wrapping around the edges when using Bootstrap

Utilizing bootstrap to structure a webpage, I have organized three divs next to each other within a row. The widths of the divs are set as follows: 2 columns, 6 columns, and 4 columns in a 12 column layout. The middle div has a minimum width defined. As a ...

htmlcsstwitter-bootstrap

The number input is not compatible with JavaScript/jQuery validation

While working on input field validation using javascript/jQuery code, I encountered an issue where the code worked fine with input type text but did not support input type number. Specifically, the 'number' type input did not work at all in FireF ...

javascriptjsonhtml

Fast method or tool for generating a detailed CSS element list from deeply nested elements

I have been using Chrome dev tools to work on a code base that was not created by me. There are numerous deeply nested elements scattered throughout the code. I find myself having to manually search through the HTML structure in order to select them with ...

htmlcssgoogle-chrome-devtools

Automatically selecting the country phone code based on the country dropdown selection

When the country dropdown is changed, I want the corresponding phone code dropdown to be dynamically loaded. <div class="row"> <div class="col-sm-8 col-md-7 col-lg-6 col-xl-5 pr-0"> <div class="form-group py-2"> <l ...

c#htmlangulartypescript

What is the reason for the inconsistency in CORS post requests working for one scenario but not the other?

Currently, I am facing an issue while attempting to add email addresses to a mailchimp account and simultaneously performing other tasks using JavaScript once the email is captured. Here's the snippet of my JavaScript code: function addEmail(){ v ...

javascripthtmlcors

Flex sidebar collapse menu

I am currently in the process of developing an admin panel for my website. I have a sidebar menu that I would like to hide behind a hamburger icon and only expand when clicked on. After researching potential solutions, I haven't found much that fits m ...

htmlcssflexbox

Tips for avoiding divs from overlapping when the window size is modified

When I maximize the browser, everything aligns perfectly as planned. However, resizing the window causes my divs to overlap. Despite trying several similar posts on this issue without success, I have decided to share my own code. CODE: $(document).read ...

javascriptjqueryhtmlcss

Optimizing the selection and deselection of checkboxes using JQuery with X checkboxes in mind

If I have a set of 'X' checkboxes (any input elements) in a form and "M" option selection indexes ("M" less than or equal to "X"), how can I efficiently select the "M" option indexes/values and deselect the remaining checkboxes? For example, if ...

jqueryhtmlcheckboxunobtrusive-javascript

Arrange four Divs next to each other with flexbox styling

I've been struggling with aligning my cards side by side. They are a series of divs nested in lists under a <ul> Changing the positioning is not resolving the issue, and I'm hesitant to alter the display as it's crucial for responsive ...

javascripthtmlcssresponsive-designuser-experience

I have noticed that there are 3 images following the same logical sequence, however only the first 2 images seem to be functioning correctly. Can you help

Update: I have found a solution that works. You can check it out here: https://codepen.io/kristianBan/pen/RwNdRMO I have a scenario with 3 images where clicking on one should give it a red outline while removing any outline from the other two. The first t ...

javascripthtmlcssfrontendweb-frontend

Guide to linking two input fields using a single datepicker

To achieve the goal of filling two input fields simultaneously, take a look at the following code snippet: <mat-form-field> <input matInput [matDatepicker]="startDate" formControlName="SaleDate" /> ...

htmlangulardatepicker

What is the best way to ensure my buttons hide or display correctly when clicked?

I have been working on setting up an edit button that toggles the visibility of save and cancel buttons. However, I encountered a problem where all the buttons disappear when I click on the edit button. This issue did not occur with my other buttons, and t ...

javascripthtmlcss

Disable button with Checkbox Javascript functionality

In my PHP code, I have an array of users that I pass to the view (in Laravel) and use a foreach loop to display all users in a table. Everything is working fine so far. However, I want to make a "send" button visible when a checkbox is clicked, instead of ...

javascriptphphtmlcheckbox

Triggering a system context menu through a longpress gesture on the MobileFirst iOS app is a

After experimenting with our MobileFirst iOS app, I noticed that if you hold down on any anchor links for more than 2 or 3 seconds, iOS will bring up a built-in menu displaying the internal path of the current HTML page. I'm unsure whether this behav ...

htmlcordovaibm-mobilefirst

"Add a touch of magic to your webpage with text effects that appear

I am looking to create a glowing text effect, and I stumbled upon this resource. http://jsfiddle.net/karim79/G3J6V/1/ However, the client prefers the text effect to appear after the page loads, rather than on hover. Unfortunately, I do not have experien ...

jqueryhtmlcss

Is there a way to showcase every published WordPress page in a drop-down menu?

I am having trouble displaying all the published pages within my WordPress site as a dropdown list. Here is the code I have attempted to use: <div class="header-right"> <?php $pages = get_pages(); $posts = get_pages(array( ...

phphtmldatabasewordpresswordpress-theming