What is the best way to separate content into columns with a border in WordPress?

Currently, I am in the process of creating an event list for a music band website using WordPress.

The layout of the list consists of two columns, and my goal is to alternate the placement of each event so that they appear in a left-right-left pattern. However, the challenge arises when I try to add a border between the columns.

I attempted to achieve this by setting the .event blocks to float:left; width:45%;, but this method did not create distinct columns where I could add a border.

Even after trying the CSS3 multicolumn layout, I was unable to achieve the desired result.

If you'd like to take a look at my code, here is the link: http://jsfiddle.net/jxe8bgyv/1/

htmlcssbordermultiple-columns

Answer №1

Give this a shot:

.event:nth-child(even) {
    border-left: 1px solid #000;
}

Answer №2

.activity:nth-child(odd){
    border-right: 1px solid red;
}

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

Adjusting the overflow of a parent div based on the position of the div within it by scrolling

I'm trying to create a page with 3 different sections: <div class="container" id="main-container"> <div class="section" id="profile"> Hello World </div> <div class="section" id="projects"> Hello World 2 ...

javascriptjqueryhtmlcss

CSS/Bootstrap : troubleshooting overflow problem

Experiencing a problem with the popover control due to a display issue. The overflow property had to be set to 'visible' in order to prevent it from being hidden behind the table. overflow:visible; For a repro, please see jsfiddle: http://js ...

csstwitter-bootstrap-3

The Clash of Backdrop Modals and Dropdown Menus

Looking for a solution to ensure that the datetimepicker stays in place when a user scrolls, even after opening the Modal backdrop with the "Open" button? The challenge lies in maintaining the position fixed for the modal while preventing the datetimepic ...

htmlcssdrop-down-menubootstrap-modaldatetimepicker

If an input type="file" is empty, then $this->form_validation->run() will return false

Whenever I make changes to my settings and leave the input type="file" empty, $this->form_validation->run() consistently returns false. Surprisingly, I haven't utilized setrules or required it. Below is the snippet of my code: public function ...

phpjquerycsshtmlcodeigniter

Divide the page vertically. On the left side, feature an eye-catching image, while on the right side,

While I have a good understanding of bootstrap 5, I am currently working on a project that requires me to split the page down the center. However, I also need to incorporate a container in the middle that sets a boundary for the text so it doesn't exp ...

htmlcsstwitter-bootstrapbootstrap-5

Opening a dynamically generated HTML file in a separate window in Flutter web

I am facing an issue with the url_launcher package while attempting to open a link using the following code snippet: try { final Uri launchUri = Uri.dataFromString( '<html><body>hello world</body></html>', ...

htmlflutter

Incorporate content upon button click using Javascript

Looking to create a unique Survey layout that includes: Question Name Options The question name is editable and can be changed with a click. Initially, there is one option with a checkbox to select it. This option should also update when clicked. Addit ...

javascripthtmlcsssurvey

Create geometric shapes on Google Maps version 2

Can anyone guide me on how to draw a polygon on Google Maps with user-input coordinates? I have two input fields for latitude and longitude, and when the user clicks the button, I want the polygon to be drawn. The code I currently have doesn't seem to ...

javascripthtmlgoogle-mapspolygonlatitude-longitude

Using JQuery and Ajax to retrieve elements from a different page, excluding the first element

I am trying to dynamically load all div elements from another page into a main container, but I want to exclude the first div. All divs within the container have the class element, while the one I wish to skip has both classes element and first_element. ...

jqueryhtmlajax

Utilize grids to ensure consistency in the width of every <li> element across the browser

Is there a way to make the ul element span the entire width of the webpage regardless of window size? http://jsfiddle.net/32hp1w5p/ ul { grid-column: 1/13; list-style-type: none; display: table; margin: 0 auto; } li { float: left; border: ...

htmlcss

I keep encountering a syntax error in my AngularJS project - what could be causing this

I'm encountering the following error in my AngularJS project. Can you assist me with resolving it? Error angular.min.js:117Error: [$parse:syntax] http://errors.angularjs.org/1.5.6/$parse/syntax?p0=Shoping&p1=is%20an%20unexpected%20token&p2=8 ...

javascripthtmlcssangularjs

In VB.NET, one can easily detect the HTML tag and update its content

I currently have some data stored in a database, which looks like this: <p><font style="BACKGROUND-COLOR: gold" size="+2" face="Arial Black"><strong>test</strong><u> test1</u> </font>< ...

htmlcssasp.netvb.net

Is there a way to eliminate the black dots appearing on the right side of the navigation items within my bootstrap 5 navbar?

I'm currently using a bootstrap 5 navbar and everything seems to be functioning correctly, except for one issue - all the nav-items have a black dot on the right side of the text. Below is the code snippet for that particular section. I've made ...

htmlcssbootstrap-5

Incorporating a click event button in a ReactJS project

Greetings Everyone Currently, I am working on developing a landing page using reactJS, a framework that I am not very familiar with. My main challenge lies in adding an onClick event to the button which will navigate to the next page of my project. Below ...

javascripthtmlreactjsonclick

No response from submitting HTML form

I'm a beginner and need some help with my form. I have two submit buttons and two actions but nothing is happening when I click on them. Here's my code: <form id="form1" name="form1" method="post"> Enter Amount*: <input type="text" name ...

phpjqueryhtmlajaxforms

Guidelines for choosing an Element Id within an attribute tag using jQuery

Check Output and -->question. . I am a beginner in utilizing Bootstrap and JQuery for programming. I am interested in learning how to identify the "id" of an input element that is nested within another element's attribute. In my code, I am using ...

javascriptjqueryhtmltwitter-bootstrapcss

Converting a Powershell array into an HTML format

I have three arrays that I need to display on an HTML page: foreach($item in $array1){ // write array data to HTML } foreach($element in $array2){ // write array data to HTML } foreach($value in $array3){ // write array data to HTML } What is the ...

htmlarrayspowershell

Challenges arise with the height settings of ui-grid

Currently, I am facing an issue with using height: auto on an angularJS ui-grid. The problem arises from an inline style that specifies a fixed height on the div to which the ui-grid attribute is added. Additionally, the function getViewPortStyle() dynamic ...

javascriptcssangularjsangular-ui-grid

Is it possible to insert clickable links within the content of a Twilio text message?

Currently, I am utilizing Twilio and Express to send programmable SMSs to the users of my web application. I'm curious if it's possible to include hyperlinks within the body of these text messages. Is there a method to achieve this? I have attem ...

javascripthtmlnode.jsexpresstwilio

How come defining the state using setTimeout does not display the accurate properties of a child component?

Presented here is a component designed to render a list of items and include an input for filtering. If no items are present or if the items are still loading, a message should be displayed. import { useState } from "react"; export const List = ...

javascripthtmlreactjs