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

Tips for choosing every <div> within a specific class

I'm trying to create multiple boxes within a class, all with the same background color. I've written code for 6 boxes in the "color-board" class, but when I go to select them, only 1 box is displaying... Below is the code for the class and how I ...

htmlcss

Trouble with Background Image Display in Internet Explorer 8

I have been attempting to set a background image for the . element, but it is not displaying correctly. The image shows up in Firefox and Chrome, but not in Internet Explorer. I have included a link to my website and relevant CSS code below. Can anyone pro ...

javascriptjqueryhtmlcss

How to center a text box within a div using CSS

Looking for equal margins on top and bottom? Here's how to achieve it: If you have a container div like this: <div id="search"> <input id="txtSearch" type="txt"> </div> Your CSS should look something like this: #search{ m ...

htmlcsscentering

Leveraging the power of Material-UI and React, modify the appearance of the "carrot" icon within the

Currently implementing MUI's textfield based on the information found at this link: https://mui.com/components/text-fields/. While there are numerous resources available for changing the font of the input text, I have not come across any documentation ...

javascriptcssreactjsmaterial-ui

Tips for increasing the size of the SVG icon within Material UI iconButtons

Have you experimented with creating webpages using react.js along with the Material UI library? How can I adjust the size of an SVG icon? Recently, I developed a "create new" component, which consists of a material paper element with an add button on top. ...

csssvgreactjsmaterial-designmaterial-ui

What is the best way to ensure an image is responsive in CSS and aligns perfectly in height with its neighboring text?

There is an image within the <img> tag and some text inside the <p> tag, both enclosed in a <div>. Although the image is responsive and resizes proportionally when the browser window changes size, there is an issue where as the text wrap ...

htmlcss

Using JQuery to enable the movement of divs on a screen through clicking and dragging, without the use of

Recently, I've been experimenting with a small project involving draggable divs. However, the code I've written doesn't seem to be functioning properly, causing JQuery to become unresponsive. Is there an alternative method that is simple an ...

javascriptjqueryhtmlcss

What is the best way to divide a page into four equal sections using two container divs?

I am working on a webpage layout that requires dividing it into four equal sections. The challenge is overlapping text onto two of these sections, which complicates the design process. My solution is to stack two container DIVs on top of each other, both w ...

htmlcss-floatcontainersequals

Simple way to extract the values from every input element within a specific <tr> tag using JQuery

Is there a way to align all input elements in a single row within my form? For example, consider the snippet of code provided below, which includes a checkbox and a text input box. I would like to retrieve the values from both of these input types and pres ...

javascriptjqueryhtml

Using flexbox to adjust the height of a block in the layout

Is there a way to modify the height of .half-containers1 and .half-containers2? Additionally, how can I create the triangle shape that is shown in the image? Is it achievable with CSS alone or do I need to use an image? Check out my fiddle for reference ...

htmlcssflexbox

PHP is failing to display line breaks when retrieving data from JSON sources

I have a JSON feed that is decoded by PHP using json_decode and then echoed onto my HTML page. The issue I am facing is that the feed contains \n characters, but when PHP echoes them out, they are not recognized as new lines or line breaks in HTML. In ...

phphtmljson

How can you easily center content vertically on a web page?

There has been plenty of back-and-forth regarding this issue, with proposed solutions ranging from pure CSS to pure HTML. Some can get quite complex, involving deeply nested divs and intricate CSS rules. I'm looking for a simple and uncomplicated answ ...

htmlcss

"Customize the font style of columns in a WordPress table created with TablePress by setting them to it

Recently, I designed a table in a WordPress blog using the TablePress plugin. My intention now is to style the left column's font in italics, excluding the table header. ...

csswordpress

When hovering over one item, it causes a hover effect on an item in a SEPARATE container

My goal is to create a unique interaction between links and images, where hovering over a link will transform the corresponding image below it, and vice versa. I have been searching for solutions but have only found methods that work when all items are wit ...

htmlcss

Floating dropdown within a scrolling box

How can I ensure that the absolute positioned dropdown remains on top of the scrollable container and moves along with its relative parent when scrolling? Currently, the dropdown is displayed within the scrollable area. The desired layout is illustrated i ...

javascriptjqueryhtmlcss

What are some techniques to ensure a bookmark retains its original style even when the cursor hovers over it?

My CSS skills are limited, so I am facing what may seem like a basic issue. On my website, I have a table of contents with links structured like this: <a href="#user-interface">User interface</a> Additionally, there is a bookmark in another ...

htmlcsshyperlinkstylesheet

The issue of the back button not functioning in the React Multi-level push menu SCSS has

I have been developing a mobile-friendly Multi-level push navigation menu for my website using dynamically generated links based on projects from my GitHub account. I found a push menu on CodePen here and am in the process of integrating it into React inst ...

cssreactjssassnavigationnext.js

What is the best way to pass the index value of a v-for loop as an argument to a computed property function in Vue?

I'm looking to pass the index value from a v-for loop (inside a path tag) as a parameter to a function stateData(index) defined in a computed property in Vue. I attempted to achieve this using v-model="stateData[index]", but an error is being displaye ...

javascripthtmlvue.js

Is it possible to edit the HTML DOM of an external URL that is opened using window.open?

Imagine a scenario where I have a page located at: www.mydomain.com When a user clicks on a button, it triggers the opening of a new window using: newWin = window.open("https://www.otherdomain.com","a","height=800,width=1000"); Now, my objective is to m ...

javascriptjqueryhtmldomwindow

Turn off the custom CSS section in the WordPress Customizer for WordPress themes

Looking for assistance in locking or disabling the Appearance -> Customizer -> Additional CSS area on Wp-admin. I have referred to this codex: https://codex.wordpress.org/Theme_Customization_API. However, I couldn't find any hook or function to disab ...

phpcsswordpresswordpress-themingwp-admin