Troubleshooting CSS: Issue with :nth-child(3n):after clearfix functionality

Hey there! I've been experimenting with some CSS code that I thought should work, but unfortunately it's not displaying properly in Google Chrome.

<ul>
<li><a href="...">bla</a></li>
<li><a href="...">bla</a></li>
<li><a href="...">bla</a></li>
<li><a href="...">bla</a></li>
<li><a href="...">bla</a></li>
</ul>

I have the following CSS:

ul li {
    float:left;
}

ul li:nth-child(3):after {
    content:"";
    display:table;
    clear:both;
}

In a responsive design, I expected the list items to start on a new row after every third item. Any suggestions for how to make this work? Shouldn't this code be functioning correctly?

csscss-selectorsclearfix

Answer №2

Remember to apply the clear fix technique to the container element, not the floating elements. This helps prevent height collapse issues within the container.

If you want to clear the float on the first child of each row containing 3 items, you can use the following CSS:

ul li:nth-child(3n+1) {
    clear: both;
}


ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul:after { /*apply clearfix hack here*/
    content: "";
    display: table;
    clear: both;
}
ul li {
    float: left;
    margin-right: 5px;
}
ul li:nth-child(3n+1) { /*clear the float here*/
    clear: both;
}
<ul>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
</ul>
-clearfixed-

Answer №3

Give this a shot:

ul li:nth-child(3n+1) {clear:both;}

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

Modifying the column layout of a CSS grid using a media query

I am working on creating a responsive grid layout with a specific breakpoint that should reduce the number of columns to 14. Here is the code snippet I have in my Sass file: #app { --mid-col-size: 60px; --mid-col-amount: 12; --edge-col: 150px; --co ...

csscss-grid

Ways to shift text upwards while scrolling in a downward direction?

I'm a beginner with jQuery and I could use some assistance. My goal is to have the text move upwards and a static box slowly disappear as you scroll down the website. Something similar to what you see here: p, body { margin: 0; padding: 0; } b ...

javascriptjqueryhtmlcss

What values can be used for the CSS Property "padding-right-ltr-source"?

Currently, I am facing an issue with box padding specifically in Firefox. Upon inspecting the affected span element, I noticed a property called "padding-right-ltr-source" with the value "physical". Here is the snippet of code: >padding: 0px 15px; ...

cssfirefoxpadding

Spin the SVG image upon clicking the Bootstrap 4 collapse feature

I am attempting to create a toggle effect for an SVG icon, rotating it from the up position to the down position when clicked. While a pure CSS solution would be ideal, I am struggling to implement it for an SVG icon. Unfortunately, I cannot use a font ic ...

twitter-bootstrapcssbootstrap-4css-transitions

Arrange a row of fifteen child DIVs in the form of bullets at the bottom of their parent DIV

Currently, I am working on customizing a slider by adding bullets. My goal is to create a gradient background for the parent div containing these bullets. However, when I try to increase the height of the parent div, all the bullets align themselves at the ...

htmlcss

Arrange flexbox containers side by side in a horizontal row

I am attempting to create two flexbox containers one after the other, utilizing a combination of classes to achieve this layout. While the flexbox is created successfully, I encounter an issue where the lower container goes below the upper one when scrolli ...

htmlcssdjangobootstrap-4flexbox

Highlighting the selected tab with an active class

Currently in the process of learning angularJs, I am still new to it and attempting to dynamically add an active class to the recently clicked tab. Within my interface, there are four tabs: insert, view, update & delete. My goal is to apply the active ...

htmlcssangularjs

Troubleshooting: Issues with jQuery animate() not functioning properly when adjusting CSS

Currently, I am experimenting with jQuery's .animate() function to change the background of a div when it is scrolled more than 100 pixels down a page. Previously, I had successfully used .css() for this purpose. JS: $(window).scroll(function () { ...

jqueryhtmlcss

Tips for employing Flex-grow alongside the behavior of "justify-content: start"

I am working with a flex container setup like this: .container { display: flex; flex-flow: row wrap; justify-content: start; width: 100%; } .item { border: 1px solid red; flex: 1 1 33%; height: 100px; } <div class="container"> <d ...

cssflexbox

What is the process for integrating this graph using highcharts?

Check out this link for more information on investment decision-making. There is a visually appealing graph and pie chart featured in the section about Investment Decision-Making in 2016. After noticing that it was created using Highcharts, I wanted to c ...

javascripthtmlcsshighchartsfrontend

Guide on placing images in a grid using CSS

Exploring a new way to arrange images in grid style with a box underneath. Seeking advice on achieving this specific layout shown in an image. Current progress in positioning can be seen in this screenshot. Desired adjustments include aligning the far ri ...

htmlcss

Is there a way to link two HTML files containing jQuery within an HTML index file?

I'm currently working on creating an index page for a pair of HTML files that utilize jquery. Let's break down the structure of these files: Emps1, Emps2: These are two HTML tables that start off empty. TabA_stats, TabB_stats: Each HTML file ha ...

javascriptjqueryhtmlcss

Icon dropdown in Bootstrap

Looking for a solution to modify this dropdown using only bootstrap classes. Instead of the current text "Dropleft" and left arrow icon, how can I replace it with an icon fas fa-ellipsis-h? <button type="button" class="btn btn-secondary ...

javascripthtmljquerycssbootstrap-4

caption sliding into the incorrect div box

As I continue my journey of learning CSS, I've encountered a puzzling issue involving slide-in captions within a different div element. The problem arises when I try to customize the appearance of the caption to better fit the overall design of my web ...

htmlcssdivide

CSS:Tips for removing borders with border-radius in CSS

I have a div that has been styled with a left-hand border, and it's causing me some trouble. You can view the styling here on Jsfiddle. Is there a way to remove just the left hand side border without affecting the rest of the design or creating an un ...

htmlbordercss

Displaying a hand cursor on a bar chart when hovered over in c3.js

When using pie charts in c3js, a hand cursor (pointer) is displayed by default when hovering over a pie slice. I am looking to achieve the same behavior for each bar in a bar chart. How can this be done? I attempted the CSS below, but it resulted in the h ...

javascriptcssd3.jsc3.js

Place the p elements outside of the divs and align them accordingly

I have a div containing multiple p elements and I need to align buttons next to certain p elements. I want the buttons to be displayed only for specific p elements, which will be controlled using JavaScript. Normally, I would put each p element in a separa ...

javascriptjqueryhtmlcssalignment

Placeholder disappears when text color is changed

I have been struggling for 3 hours trying to change the placeholder color to graytext, but it's just not working. Here is the code I've been using: <div class="form-group"> <label for="email">Email:</label ...

htmlcssbootstrap-4

Enhancing the appearance of dropdown menus for WooCommerce Variable products with custom CSS styling

I currently have a Wordpress website with WooCommerce and several variable products. Each product's variation has a dropdown menu that displays different options when clicked. My main concern is how to customize the appearance of these dropdown menus ...

javascriptcssajaxwordpresswoocommerce

Error in Blinking Tooltip when Hovering Skill Bubble (React and d3)

I've encountered a frustrating issue with tooltips on my website - they just won't stop blinking when I hover over the skill bubbles. I tried fixing the tooltips at a certain location, but whenever there's a bubble in that spot and I hover o ...

javascripthtmlcssreactjsd3.js