The floating left unordered list inside a floated left division is constantly changing

My goal is to achieve the following layout:

On a Search Results website, there are two containers.

Container 1 and Container 2 are both DIV elements with the CSS property float: left.

Inside Container 2 is an unordered list (UL) with a dynamic number of list items (LI).

https://i.sstatic.net/XYYzN.png

If there are matching search results, Container 1 should be visible. However, it may not always be present in the HTML structure.

In cases where Container 1 is absent, I want Container 2 to expand to full width with the list items floating left.

https://i.sstatic.net/Ox8Cg.png

If the viewport's width (in a responsive design) cannot accommodate both containers side by side, then Container 2 should move to a new row while still maintaining full width with the list items floated left.

https://i.sstatic.net/Kpn1S.png

Simply setting the list items to float: left causes Container 2 to collapse into a new row. Attempting to use display: inline-block for the list items also leads to container collapse.

Do you have any elegant solutions using CSS for this issue? I've tried various methods without success.

JSFiddle Example: https://jsfiddle.net/y8vctgun/1/

htmlcsscss-float

Answer №1

When the container1 is not present in the HTML due to no results, you can achieve this using CSS...

.container1 + .container2 li {
    float: none!Important;
}

.container2 ul li {
    float: left;

    margin-right: 20px;
    padding: 4px;
    background-color: #0f0;
    color: #000;
 }

To clarify, I applied float:left to the li element and then used float:none to override it if container1 exists. Modify as needed for your specific requirements.

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

choose a row from the list

Looking for assistance from seasoned professionals as I have been grappling with this issue for a while now. Here's the breakdown of the problem: The list of products that have already been viewed is provided below serial | name | description ...

phphtmlmysql

Ways to determine when some, yet not all, variables are identical to `null`

There has been an issue with the if statement in detecting whether some variables are equal to null, but not all. Can anyone assist me with this problem? else if (co != 2 || o != 0 || d != 0 || e != 6) if (c ...

javascripthtml

Creating a webpage that dynamically loads both content and video using HTML and Javascript

I designed a loading page for my website, but I could use some assistance. The loading page remains visible until the entire HTML content is loaded and then it fades out. However, I am facing an issue because I have a background video that I want to load ...

javascriptjqueryhtmlcssvideo

Getting user input with JQuery and dynamically updating CSS properties

<img src="purplemoon.png" alt="Purple moon" id="moon-photo" /> <table> <tr> <th colspan="4">Control panel</th> </tr> <tr> <td> <!-- attempting to retrieve value from the input field ...

javascriptjqueryhtmlcss

Variations in site titles across different pages of the same website

I'm encountering a strange issue. The title of my website appears differently on two separate pages, even though the CSS is identical when inspected. Check out my site: ryantuck.io This is how the title looks across the site: And this is how it ap ...

htmlcssfonts

List items and HTML buttons do not align correctly when placed side by side

As part of my efforts to deepen my understanding of Vuejs, I've taken on the task of building a traditional todo list app. While most of the functionality is working smoothly, I've encountered an issue with how the todo items are being displayed. ...

htmlcssvue.jssass

Generate a segment of HTML content dynamically

My front-end HTML has a section that is dynamically loaded based on the number of entities in the backend. For example, if there are 5 entities in the backend, the div will be repeated 5 times. Currently, this repetition logic is handled by JavaScript. Her ...

javascriptjqueryhtmlangularjsember.js

creating dynamic animations using jQuery UI's position() method

Is it possible to animate from the current position to the center using the position({of:,my:,at:}) function? I'm seeking a way to automate this process rather than manually animating the CSS properties. ...

jquerycssuser-interfacejquery-animatepositioning

I possess a functional tool, yet I am unable to generate a form through its implementation

Here is the code snippet I wrote: <html> <body> <script> function findMonths(n) { var a = 4; var k = 1; for (i = 1; i <= n; i++) { k += 1; if (k % 4 == 0) { a += 2; ...

javascripthtmlwordpress

Element not being located by Selenium

Having trouble retrieving an element for clicking? Check out how Selenium in Python can help: from selenium import webdriver from selenium.webdriver.chrome.options import Options chrome_options = Options() chrome_options.add_argument('--dns-prefetch- ...

pythonhtmlselenium-webdriverselenium-chromedriver

An innovative approach to incorporating multiple patterns into HTML input using markup alone, without the need for JavaScript

Input fields are currently set to accept phone numbers in the format 555-555-5555 using the pattern [0-9]{3}-[0-9]{3}-[0-9]{4}. Is it possible to modify the pattern to also allow phone numbers in the format of 5555555555? <input type="tel" cl ...

htmlregex

What is the method for displaying a div adjacent to a password input field?

I am attempting to display a password verification box next to an input field. The current logic is functioning properly, but the box containing all password requirements is not appearing in the correct position. Instead of being positioned adjacent to the ...

javascriptjqueryhtmlcsstwitter-bootstrap

Flex rows adjust to display as flex columns when viewed on tablets

Currently facing a challenge with responsive flex boxes. On desktop, I have 5 items in one row, but I need them to be displayed as 2 columns on tablets, with each column containing respective items. Additionally, 3 out of the 5 items should function as acc ...

htmlcss

Adjust the cursor style using Javascript

I am currently working on a paint software program and I have a feature where pressing the ctrl key while moving the mouse turns on the eraser. However, when the key is pressed, I want the cursor (currently a crosshair) to change to none. I have tried impl ...

javascriptcsscursor

The functionality of jQuery is not functioning properly on dynamically created identical divs

I am currently working on creating a comment reply section. I have managed to load the same div for reply that I use for commenting by utilizing $('#1').append($('.enterComment').html());. In this case, 1 represents the id of the div th ...

javascriptjqueryhtmlcss

Enhance your website navigation with Bootstrap Scrolling Nav: maintain consistent section heights and highlight the active

Can you help me with an issue I'm having when clicking on the <a> link in the navigation? The anchor point seems to be misplaced as the section headline (<h2>) is not visible. Is there a way to highlight the <a> links, perhaps by add ...

htmlcsstwitter-bootstrap

Picture in box container

Having trouble figuring out how to fill containers with images? I've encountered an issue. If the images are too short, they need to be full height, but they can overflow the sides. If the images are too narrow, they should be full width, but they m ...

jquerycssresizeimage-resizing

Struggling to format XML in a tree structure for the output file

I have been attempting to accomplish this task using PHP code to save data in XML file in a tree format, but unfortunately, I have not been successful. There seems to be an issue that I can't quite pinpoint. The output continues to appear as a long st ...

javascriptphphtmlxmlforms

Adjust the positioning of a class element

I have an eye icon that changes position when clicked. Initially, it is set to left: 10%;, but if there is a DOM element with the ID login-section, it should be repositioned to left: 50%;. I attempted to use document.getElementsByClassName('fa-eye-sl ...

javascripthtmlcss

Three.js is not displayed by the browser

I've recently delved into the world of webGL and three.js and decided to try out an example from JSFiddle, http://jsfiddle.net/BlackSRC/XWCRM/1/ However, upon testing it, I'm facing an issue where nothing is showing up on the screen. Here is th ...

htmlthree.jswebglrender