Is there a way to achieve a two-column layout using a single UL without modifying the HTML code?

In working with a CMS, I've encountered some limitations where I can't change the markup directly. However, I am able to add custom classes to each list item (li). Despite these constraints, I need to achieve a specific layout using the existing markup. Here is the current structure:

<ul class="sub-menu">
  <li><a>something</a></li>
  <li><a>something</a></li>
  <li><a>something</a></li>
  <li><a>something</a></li>
  <li><a>something</a></li>
  <li><a>something</a></li>
  
  <li class="somestuff">some markup</li>
</ul>

While my current CSS produces this result: https://i.sstatic.net/IqFtR.png

My goal is to achieve this layout: https://i.sstatic.net/bfkEp.png

I'm wondering if implementing flexbox or similar techniques on the .sub-menu class could make this possible?

Edit: To clarify further, I've created a codepen for better visualization - https://codepen.io/anon/pen/ZRGxNE. Specifically looking to have the green block on the right side :)

htmlwordpresscss

Answer №1

A method utilizing the power of CSS Grid:

#container {
  background: lightblue;
  padding: 10px 20px;
  display: grid;
  grid-template-columns: auto auto;
  /* set the height of the blocks */
  grid-template-rows: repeat(6, 50px);
  /* use grid-gap instead of margin */
  grid-gap: 18px 0;
}

.left-block {
  background: red;
  grid-column: 1;
}

.right-block {
  grid-row: 1 / -1;
  grid-column: 2;
  background: green;
  
  border-left: 2px solid blue;
}
<div id="container">
  <div class="block left-block"></div>
  <div class="block left-block"></div>
  <div class="block left-block"></div>
  <div class="block left-block"></div>
  <div class="block left-block"></div>
  <div class="block left-block"></div>
  <div class="block right-block"></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

Is there a way to capture the input from the text box and store it in the local storage?

I'm confused about why the data entered into the input box is not being saved to local storage. <body> <input id="name"> <button onclick="bob()"> save </button> </body> <script> const user = document.getElementByI ...

javascripthtml

Adjusting the background color of an HTML element with CSS through the power of Javascript

I am looking to dynamically change the background color of an element in CSS using JavaScript when a button is clicked. Currently, my CSS code looks like this: div.box { width:100px; height:100px; background-color:#FF2400; } I want the backg ...

javascriptcss

Strategies for Implementing Multi-Step Password Form Validation

Currently, I am using https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_form_steps as the foundation of my form with some adjustments. Validation is functioning correctly where empty fields disable the next button. However, when I attempt to add ...

javascripthtmlforms

Alignment of a Definition List with Omissions of Definitions

Often, I come across applications with forms containing optional fields. In the Show view, these fields tend to "collapse" together and lose alignment with their corresponding labels. For instance, if I have 3 fields that should be displayed as: Phone: 3 ...

htmlcssruby-on-rails

Animated SVG Arrow Design

I created a dynamic SVG animation that grows as you hover over it. Since I'm still learning about SVG animations, I encountered some issues with my implementation. The animation is quite straightforward - when hovering over the SVG arrow, the line sho ...

javascriptcssreactjssvggatsby

Is it possible for an onclick attribute to assign a function to document.getElementById without overwriting the existing value?

I want to create a numeric keypad in HTML with numbers 1-9, and I'm unsure if JavaScript can handle an onclick function for each key to show the number in the display div. What would be the most effective way to achieve this? <div id="display"> ...

javascripthtml

What is the method for reversing a transition?

I recently implemented a transition effect from height: 0, width: 0 to a specific width on my webpage. It's working perfectly, transitioning from the bottom left to the top right as intended. I started thinking, what if I change the float property to ...

csstransition

Is it possible to extract information from a website if the body or row does not contain any attributes?

As a beginner in the world of coding and this website, I kindly ask for some patience with me. I have successfully created code to scrape a particular website, extract data, and store it in a MySQL database. Everything is working smoothly. Now, my goal i ...

phphtml

When new text is added to Div, the first line is not displayed

One of the divs on my page has an ID of "TrancriptBox" and contains multiple lines of text. When I scroll through it on my iPad, everything works fine. However, if I scroll and then change the text within that div, it doesn't display the first line o ...

javascriptjqueryhtmltext

Ensuring Consistent Image Resolution Across Multiple Servers Using Cloudinary in Rails

In my app, I have a search page filled with results from scraped content. Each result includes an image sourced from an external URL. My goal: To ensure that each image has the same size and can be placed within Bootstrap's grid system. <%= cl_im ...

cssruby-on-railstwitter-bootstrapruby-on-rails-5cloudinary

Send the result of a successful AJAX request to a partial view

I have added these lines of code, where the success function returns data in the form of [object Object], with attributes like Name, Category, and Description. $.ajax({ url: rootUrl + 'Admin/EditRSS', type: "GET", data: { ...

jqueryhtmlajaxasp.net-mvc

What is the process for integrating require.js and jquery.min.js?

I am facing an issue with a specific piece of code: <script data-main="http://northapp.co/_a/js/main.min.js" src="http://northapp.co/_a/js/require.js"></script> Why am I unable to connect require.js with jquery.min.js? I have tried the follow ...

javascriptjqueryhtmlajaxrequirejs

Set the title attribute according to the content of the <p> tag

Recently, I encountered a situation where I had numerous p tags with a specific class (let's call it .text). My task was to include the title attribute containing the text of each tag. For example: <p> Hello, world </p> This would resul ...

javascriptjqueryhtml

Is it possible to change the src attribute after the page has loaded and execute it

A. I'm trying to figure out how to dynamically change the src attribute of an image using JavaScript after the page has loaded. <img src="http://example.com/image.png" /> to <img src="http://domain.com/different.jpg" /> B. Another questi ...

javascriptjqueryhtml

Substituting Meta Viewport tag with alternative CSS method for HTML emails

In an effort to improve support for legacy Blackberrys, we made the decision to take out the meta viewport tag <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0" /> from our HTML emails. Some major email test ...

csswindows-phone-7html-emailmetaemail-templates

"When you hover over an element, extra information will pop up that only pertains to that specific element and will not impact any surrounding

As I dive into the world of HTML and CSS, I've come across a hurdle when it comes to hovering over divs and displaying hidden elements. The goal is for the card to change color on hover (which I've achieved), expand in size, and reveal hidden con ...

htmlcss

The div container is not expanding to full width on mobile screens when using Next.js and Tailwind CSS

My goal is to make my div stretch or go full width similar to the table on my page. I have experimented with max-w-full, w-screen, and w-full, but the div is not extending all the way... https://i.stack.imgur.com/8BJnI.png This is the code for my page. ...

htmlcssnext.jstailwind-cssresponsive

Using Selenium WebDriver to retrieve the tagname of an element

I am trying to use python to extract the name of the element data-test-carrier-name, specifically looking for "trenitalia" as the result. The relevant HTML snippet is: div class="_1moixrt _dtnn7w" tabindex="0"span data-test-carrier-name="trenitalia" My ...

pythonhtmlseleniumwebdriverelement

What is the reason that setting margin to 0 auto centers an element, while using margin 1 auto does not have the same effect?

When using margin: 0 auto;, it means that there is a margin size of 0 on the top and bottom of the element, with the available space being divided equally for the left and right margins. This behavior works as expected in the example below. In contrast, c ...

css

Create a React MUI component that allows menu items to become sticky when selected

Is there a way to make the mui MenuItem stay sticky to Select while scrolling down? To see the issue in action, check out this codesandbox example https://codesandbox.io/s/quirky-knuth-5hr2dg?file=/Demo.tsx Simply click on the select and start scrolling ...

javascriptcssreactjsmaterial-uidrop-down-menu