Is it possible to create a webpage layout with CSS using the flex or block properties?

This code is automatically generated HTML from a CMS and the items will be dynamic inside a ul tag. However, I require a layout similar to the image below:

https://i.sstatic.net/1xnow.png

* {
  box-sizing: border-box;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sub-pro li {
  padding: 0 10px 10px;
  display: inline-block;
  vertical-align: top;
  width: 49%;
}

a {
  display: block;
  padding: 10px;
  background: #ccc;
  text-align: center;
  text-decoration: none;
  color: #333;
}
<ul class="pro">
  <li>
    <ul class="sub-pro">
      <li>
        <a href="#">Task 2</a>
      </li>
      <li>
        <a href="#">Task 2</a>
      </li>
      <li>
        <a href="#">Task 2</a>
      </li>
    </ul>
  </li>
  <li>
    <ul class="sub-pro">
      <li>
        <a href="#">Task 2</a>
      </li>
      <li>
        <a href="#">Task 2</a>
      </li>
      <li>
        <a href="#">Task 2</a>
      </li>
      <li>
        <a href="#">Task 2</a>
      </li>
      <li>
        <a href="#">Task 2</a>
      </li>
    </ul>
  </li>
  <li>
    <ul class="sub-pro">
      <li>
        <a href="#">Task 2</a>
      </li>
      <li>
        <a href="#">Task 2</a>
      </li>
      <li>
        <a href="#">Task 2</a>
      </li>
    </ul>
  </li>
</ul>
How can I achieve a layout like this? Is it possible to create it using CSS with flexbox, float, or block properties?

htmlcssflexbox

Answer №1

One way to address this issue without altering the markup is to set all innermost ul and outermost li elements as inline elements.

* {
  box-sizing: border-box;
}

.pro > li, .sub-pro {
  display: inline;                 /*  added  */
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sub-pro li {
  padding: 0 10px 10px;
  display: inline-block;
  vertical-align: top;
  width: 49%;
}

a {
  display: block;
  padding: 10px;
  background: #ccc;
  text-align: center;
  text-decoration: none;
  color: #333;
}
<ul class="pro">
  <li>
    <ul class="sub-pro">
      <li>
        <a href="#">Task 2a</a>
      </li>
      <li>
        <a href="#">Task 2a</a>
      </li>
      <li>
        <a href="#">Task 2a</a>
      </li>
    </ul>
  </li>
  <li>
    <ul class="sub-pro">
      <li>
        <a href="#">Task 2b</a>
      </li>
      <li>
        <a href="#">Task 2b</a>
      </li>
      <li>
        <a href="#">Task 2b</a>
      </li>
      <li>
        <a href="#">Task 2b</a>
      </li>
      <li>
        <a href="#">Task 2b</a>
      </li>
    </ul>
  </li>
  <li>
    <ul class="sub-pro">
      <li>
        <a href="#">Task 2c</a>
      </li>
      <li>
        <a href="#">Task 2c</a>
      </li>
      <li>
        <a href="#">Task 2c</a>
      </li>
    </ul>
  </li>
</ul>

Answer №3

Another way to achieve this is as follows:

* {
  box-sizing: border-box;
}
.container {
width: 700px;
background-color: pink;
}
ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  
}

.pro li {
    flex-basis: 50%;
    padding: 5px;
}

a {
  display: block;
  padding: 5px;
  background: #ccc;
  text-align: center;
  text-decoration: none;
  color: #333;
}
<div class="container">
<ul class="pro">
   <li><a href="#">Task 2</a></li>
   <li><a href="#">Task 2</a></li>
   <li><a href="#">Task 2</a></li>
   <li><a href="#">Task 2</a></li>
   <li><a href="#">Task 2</a></li>
    
   <li><a href="#">Task 2</a></li>
   <li><a href="#">Task 2</a></li>
   <li><a href="#">Task 2</a></li>
   <li><a href="#">Task 2</a></li>
   <li><a href="#">Task 2</a></li>
</ul>
</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

How can you quickly navigate to the top of the page before clicking on a link in the same window/tab?

Could someone assist me with a coding issue I am facing? I would like to be able to go to the top of the page when clicking on a link and have the link open in the same tab. I attempted to implement this functionality using the following code, however, I ...

javascriptjqueryhtmlcss

Shifting an identification to the following element with the help of jQuery

I need to transfer an ID from one element to the next select element on the page. I am facing this challenge because the software used to create the select boxes does not allow for classes or ids to be directly added to select elements. Additionally, I am ...

jqueryhtml

Clicking to center div elements

When clicking on my div elements, they transform into flipcards and expand to a size of 600px by 600px. I want these divs to be centered in the middle of the screen when clicked, and then move back to their original position when clicked again. I've b ...

javascriptjqueryhtmlcss

How can I use CSS to center multiple divs with varying heights within a parent div?

Consider the HTML code provided below: <!DOCTYPE html> <html> <body> <div id="parent" style="border:1px solid #666;width:600px;height:200px;padding:5px;"> <div id="child1" style="border:1px solid #666;float:left;margin-left:10p ...

htmlcss

The art of styling <li> elements compared to <a> elements

While these inquiries may lean towards being subjective, I am interested in learning about the industry's generally accepted best practices: 1) With responsive design and collapsible menus becoming more common, should a nav or nav menu element be sty ...

htmlcssnavigation

Selection determines the value of two fields

This form has predefined values that are used to create a link, but the issue is that these values vary depending on the location. Can you assist me with this problem? <input type="radio" id="iconapp1" name="department" value="1250"/><label for ...

javascriptphpjqueryhtmlforms

Modifying content on links that are dynamically created

I have some dynamically added link elements that are initially hidden from the page. These links are generated by a third party telerik control, and I need to change the text of these links using jQuery. I have created a rule (selector) that targets the ...

jqueryhtmlhyperlink

Design a div in the shape of a trapezium with clipped overflow

Is there a way to create a trapezium using CSS/Html/Canvas? I have attempted to do so, but my current method is messy and not practical. div { width:0; margin-left:-1000px; height:100px; border-right:1000px solid lightblue; border-top:60px solid tra ...

javascriptjqueryhtmlcss

Prime NG: Filtering options using label in dropdown menu

I'm facing an issue with my angular project that utilizes prime ng. The problem arises when attempting to perform a column search on rows of dropdown values. When searching for 'Jan', the system fails to retrieve any data, but interestingly ...

htmlangulartypescriptprimengprimeng-dropdowns

Accessing parent libraries from an Iframe: A step-by-step guide

Currently, I'm developing a web application utilizing an embedded web server that restricts me from modifying the HTTP header to enable file caching. One issue I've encountered is that whenever I update the src of an iframe in my app, it forces a ...

javascripthtmliframe

What is the best approach to reverse the selection of <li> elements by utilizing :not() and :contains

I am looking to implement a live search feature using jQuery. Below is the code snippet I have written: $("#searchInput").on("keyup", function () { var searchTerm = $("#searchInput").val(); $('li:contains("' + searchTerm + ' ...

javascriptjquerycss

As the cursor moves, the image follows along and rotates in sync with its

Can anyone help me figure out how to create a moving image that follows the mouse cursor? I have a radial pie menu with an image in the middle, and I want it to spin and rotate as the mouse moves. Any ideas on how I can achieve this effect? I would greatl ...

javascripthtmljquerycss

What is the process for executing a GET/POST request and receiving a JSON response on a webpage?

I am working on a page that has a JSON result, with both get and post methods in the controller. There are two submit buttons - one that redirects to the Post method and another that goes to the JsonResult method (named AddTableData). How can I set this up ...

c#javascriptjqueryhtmlasp.net-mvc

Innovative approach to managing extensive geospatial datasets

I developed a unique application that incorporates points onto a map within specific polygons. This app is built using Windows Forms with a straightforward user interface. The points are pre-filtered and the program utilizes Python, geopandas, and folium l ...

pythonhtmlleafletgeospatialfolium

Tips for creating content surrounding the JSP output: What to include before and after the JSP results

My goal is to enhance the functionality of my JPSs that represent Components. I am seeking a way for these component JSPs to generate HTML before and after their main content is executed. In the current example, we have a file named component.jsp with the ...

javahtmljspservlets

Is there a way to place a clickable icon above images in a flexbox grid, specifically in the bottom right corner?

Can someone help me place an icon like this over my flexbox image grid in my project? I want the icon to be clickable so that when it's clicked, the image will pop up large. Any assistance would be greatly appreciated! Thank you! See below for the co ...

htmlcssflexbox

R: Extracting data from web pages: The content appears to be formatted in XML but is not recognized as such; employing HTML

Working on scraping data from multiple years which are represented by different webpages. I have successfully extracted the 2019 data as expected, but encountering an error while attempting to preprocess the 2016 data in a similar manner. url19 <- &apos ...

htmlrxmlweb-scrapinghtml-parsing

When an image is clicked, add the coordinates to a div

Is it possible to append the coordinates displayed when hovering over an image in a div using jQuery? You can see what I have so far in this fiddle: Fiddle Here is the jQuery code: $('.hover').mousemove(function(e){ var hovertext = ...

javascriptjqueryhtml

Unable to view indicators and slides are not transitioning in Bootstrap carousel

I am in the process of developing a website with bootstrap, but I am encountering issues with the carousel feature. Despite copying the code directly from their official page, the carousel remains non-functional. The indicators are missing, and the slides ...

htmlcssbootstrap-5bootstrap-carousel

Angular real-time data tracker

As a newcomer to Angular, I am facing some challenges trying to achieve real-time data updates in my app. My goal is to retrieve JSON data from an MSSQL server via a web server. I have successfully fetched data using the following code: export class AppC ...

htmlangulartypescript