Switch the orientation of the unordered list from horizontal to vertical in a dynamic way

Perhaps a repeated inquiry, yet I have been unable to discover a solution for this issue...

I am dealing with a div element (referred to as master) that I do not have the ability to adjust in terms of width or height.

Contained within the master is another div (known as container) over which I do have control.
And within this div, there are 3 ul elements, each set at 240px.

My objective is as follows:

If the total width of the master is less than 720px (240px per ul multiplied by the number of ul's), I want the ul elements to be displayed vertically (stacked on top of each other).
However, if the overall width of the master exceeds 720px, then I wish to display the ul elements horizontally (side by side).

In addition, I would like the container element to have the smallest possible width necessary to accommodate its child ul elements.

Is it conceivable to achieve this using solely css/html?

I have attempted utilizing flex, float, and tables without success...
I have created this fiddle for reference.

To visually emphasize my request:

https://i.stack.imgur.com/J5Qmb.png

https://i.stack.imgur.com/WId5E.png

The gray box represents the master element.
The red box denotes the container.
While the green boxes symbolize the individual ul elements.

htmlcssflexbox

Answer №1

Check out the updated fiddle: here.

If you want to align ul elements, you can use `float:left`.
Make sure to adjust the padding along with the width (I reduced it by 230px considering the 5px padding).
Also, I modified the container from `overflow:auto` to `overflow-y: auto`.

I hope this explanation clarifies everything for you.

Here is the updated css:

div.master {
  background-color: gray;
  width: 720px;  
  height: 405px; 
}

div.container {
  background-color: red;
  max-height: 250px;
  overflow: auto;
  display: inline-block;
  min-width: 320px;
  max-width: 760px;
}

ul.list {
  background-color: green;
  width: 240px; 
  height: 150px; 
  padding: 5px 5px 5px 5px; 
}

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

The text input is malfunctioning in the IE web browser

For my project, I am incorporating AngularJS but encountering an issue with the input type text in IE browsers specifically IE 11 and IE 10. The problem arises when clicking on the input box - while the focus is triggered, the cursor does not appear insid ...

jqueryhtmlangularjsinternet-explorer

What is the best method for showcasing various content using a uniform accordion style in React?

What is the most efficient way to display various content within multiple accordions? view image description here This is the current approach I am taking in my project, where shipping information and delivery options will involve different textboxes, labe ...

javascriptcssreactjstwitter-bootstrap

Guide on how to append input field data to a table using jQuery

My current project involves working with a table, and I have encountered some challenges along the way. Typically, I have 4 input fields where I can input data that is then sent to the table in my view. However, if I exceed 4 values and need to add more, I ...

javascriptjqueryhtmlcss

Javascript - When I preview my file, it automatically deletes the input file

My form initially looked like this : <form action="assets/php/test.php" method="post" enctype="multipart/form-data"> <input type="hidden" name="MAX_FILE_SIZE" value="1000000" /> ...

javascripthtml

What is causing the bullets for the unordered list to appear before the items are inserted into the list?

Can you explain why the bullets are showing up before the list items are added? <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>To Do List</title> </head> <body> ...

javascripthtmlnode.jsejs

Updating CSS stylesheets dynamically when onchange event occurs

I am currently able to dynamically change style rules using JS, but I feel that this is limiting. I would prefer to be able to swap entire CSS stylesheet files easily. Do you have any suggestions on how to accomplish this? Here is my code: <label>T ...

javascriptjqueryhtmlcss

Is it possible to modify the page contents using the htaccess file?

Is there a way to manipulate the content of a page using the htaccess file? Perhaps something similar to a redirect, but instead of directing the user to a new page, it would alter the existing page's content? ...

html.htaccessurl

"Utilizing the power of Angular 6's JSON pipe

Looking for a well-structured formatted JSON, but all I get is confusion and this strange image: Does anyone have any insights on what might be causing the issue? HTML <span style="font-weight: 500;">Payload Data: </span> <pre><co ...

htmlcssangulartypescript

Attempting to showcase a button element within a popover, although it is failing to appear

I have implemented a feature where a popover appears when hovering over an inbox icon (font-awesome). However, I am facing an issue with displaying a button on the second row within the popover. The title is showing up fine, but the button is not appearing ...

javascripthtmljquerycssbootstrap-4

Modify CSS when scrolling, based on the size of the screen

I've implemented this JQuery script to modify elements in my header as the user scrolls. Is there a way to limit these modifications based on the screen size? Here's the code snippet: $(window).scroll(function() { // Once the user has scro ...

jqueryhtmlcssscroll

Using jQuery, target the specific elements that have certain data attributes assigned to them

Is there a way to target elements with a specific data attribute and a unique class using jQuery? For instance, I want to select these elements: <div data-roomid="55" data-status="NoData"></div> <div data-roomid="55" data-status="Open"> ...

javascriptjqueryhtmljquery-selectors

TextBox with MultipleLines

I'm looking to add functionality to a text area with formatting capabilities as shown in the diagram. Can anyone guide me in the right direction? Also, whenever I click on the text area, a formatting tool should automatically appear above it. This i ...

htmlasp.net

Lock the first row and a few lines in place for an HTML table

I'm facing a layout challenge on my webpage. I have a header line followed by a table, and I want both the header line and the top row of the table to be frozen while allowing the rest of the table to scroll. Despite trying to use 'position:fixed ...

htmlcss

Ways to expand the border horizontally using CSS animation from the middle

Currently, I am experimenting with CSS animation and I have a query regarding creating a vertical line that automatically grows in length when the page is loaded. I am interested in making the vertical line expand from the center in both upward and downwar ...

javascriptjqueryhtmlcsscss-animations

Creating unique CSS classes for custom forms in Web2py

What is the best way to assign a custom web2py form's class? for example: {{=form.custom.begin}} Image name: <div>{{=form.custom.widget.name}}</div> Image file: <div>{{=form.custom.widget.file}}</div> Click here to upload: {{= ...

pythoncssweb2py

Aligning buttons in an inline form with Bootstrap

Issue with Button Alignment Post Validation. <form class="form-inline form-padding"> <div class="form-group"> <div class="input-group"> <input class="form-control" placeholder="First Name" name="fir ...

jqueryhtmlcsstwitter-bootstrapjquery-plugins

Is there a way to position the twitter embed at the center of a webpage?

I am attempting to embed a Twitter video and twit in such a manner that they are perfectly centered on the page and also take up the entire width of the container (my-container). Here is the HTML code that I currently have: <div class="my-container"&g ...

htmlcsstwitter

Variations in Angular scope variable behavior

Code Snippet in HTML <input ng-model="test1.param"> <input ng-model="test2"> Code Snippet in Controller $scope.test1 = { param: null }; $scope.test2 = null; Upon entering text in both input fields: The value of $scope.test1.param changes ...

htmlangularjs

A Guide to Retrieving ngCordova Camera Images Using JavaScript

Currently in the process of developing a photo-editing application using the Ionic Framework. Initially, I integrated an open-source JS Drag & Drop photo editor and made necessary modifications. However, my challenge lies in accessing the image created by ...

htmlangularjsionic-framework

Interact with a dropdown menu using Selenium

Typically, my approach with the Selenium Select object is as follows: val selectCode = new Select(driver.findElement(By.id("someID"))) selectCode.selectByValue("4") The issue arises when there is no value in the html code. Here is an example of a ...

javahtmlselenium