Organizing items in rows with alternating quantities using CSS within a fluid design

Encountering a peculiar issue while attempting to organize items spread across multiple rows, with each row having either 5 or 4 items (alternating between 5 and 4 items per row). However, when the screen width reaches 480px, the layout automatically switches to two items wide regardless of the number in each row. This results in a layout problem between the rows with 4 items and those with 5 items. When they are stacked on top of each other, the rows with 4 items display correctly as 2x2, but the rows with 5 items have an empty space at the end of the row (appearing as 2x2x1).

Layouts:

2x2 row layout (with blank item issue)

HTML:

<section id="rowArea">
   <div class="row fiveRow clearfix">
        <div class="rowItem"></div>
        <div class="rowItem"></div>
        <div class="rowItem"></div>
        <div class="rowItem"></div>
        <div class="rowItem"></div>
   </div>
   <div class="row fourRow clearfix">
        <div class="rowItem"></div>
        <div class="rowItem"></div>
        <div class="rowItem"></div>
        <div class="rowItem"></div>
   </div>
   <div class="row fiveRow clearfix">
        <div class="rowItem"></div>
        <div class="rowItem"></div>
        <div class="rowItem"></div>
        <div class="rowItem"></div>
        <div class="rowItem"></div>
   </div>
</section>

CSS:

/* Screen Width > 480px */
#rowArea {width:810px; height:auto; }
   .row {height:100px; }
   .fourRow {width:80%; padding:0 10%; }
      .fourRow .rowItem {width:25%; height:100px; float:left; }
   .fiveRow {width:90%; padding:0 5%; }
      .fiveRow .rowItem {width:20%; height:100px; float:left; }

/* Screen Width < 810px */
#rowArea {width:100%; height:auto; }

/* Screen Width < 480px */
#rowArea {width:100%; height:auto; }
   .row {height:100px; }
   .fourRow, .fiveRow {width:100%; padding:0 0; }
      .fourRow .rowItem, .fiveRow .rowItem {width:50%; height:100px; float:left; }

How can I adjust the structure and styling to get rid of the empty space at the end of the 5-item rows? Appreciate any assistance provided!

Answer №1

It appears that the issue may be caused by the clearfix class. The purpose of a clearfix class is to ensure that an element contains any floated child elements. Try removing this class and instead adjusting your mobile css on .row to set height: auto. This should allow the child elements to float properly next to each other.

For a simple example, check out: http://jsfiddle.net/gv5jL/1/

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

Exploring how to replicate background-size: cover with a center position using HTML5's <video> tag

Looking to replicate the effect of background-size: cover on a <video> element. I was able to achieve this with the code below: <video id="videobackground" autoplay="true" loop="true"> <source src="BackgroundFinal2.mp4" type="video/mp4" ...

The iPhone display scaling issue is causing difficulty viewing the entire website

Currently experiencing difficulties with a page that lacks sufficient content, resulting in a smaller height. As a result, the iPhone is scaling the page and cutting off the full menu bar (960px wide). I attempted to set a minimum height using a media quer ...

A step-by-step guide to invoking a function upon submitting a form with an external JavaScript file

How can I execute a function when the user submits a form using an external JavaScript file? index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>example</title> ...

Saving JSON data into an HTML element using Handlebars templating

Is there a way to save the entire JSON object within an HTML element as a data attribute? let a = {name : "sample", age : "34"} $.find('#someDiv').data('adata', a); Is it possible to achieve the same result using Handlebars when creat ...

Using a jQuery script, you can enable a back button functionality that allows users

I created a survey to assist individuals in determining where to go based on the type of ticket they have. However, I am currently facing difficulties with implementing a "Back" button that will display the previous screen or "ul" that the user saw. Initia ...

Ways to activate the date input field and reformat it for smooth insertion or selection in mysqli

I would like to enable the input of dates in UK format - DD/MM/YYYY on an HTML form. Before any PHP code is executed, such as queries (e.g. select, insert, etc.), I want PHP to convert the entered date from DD/MM/YYYY to YYYY-MM-DD. HTML <div class="f ...

I require the CheckBox to be repositioned slightly lower

https://i.sstatic.net/xIi8m.png I'm trying to center align the checkbox between the Input and Button elements. I attempted using the "align-center" class in the "form-check" div, but it didn't work as expected. Could someone please provide me wi ...

Creating consistent widths for drop downs and text boxes in Bootstrap

I'm currently using VB.Net MVC, Razor, Bootstrap, and Visual Studio 2013. My clients have requested that the dropdowns match the width of the text boxes. Here is how I create my dropdowns: @<div class="row"> <div class="col-md-4"> ...

CSS styles are not being displayed on elements that have been dynamically added using jQuery

I have searched through similar questions, but none of them addressed my issue. (they all seemed to be related to typos) This is just for fun. I am trying to create a table using jQuery based on JSON data. The problem is that the appended table rows do no ...

I need to print out a table, but when I preview the print, I want to rotate the entire page for better visibility

Is there a way to rotate the print review using CSS and HTML? I am facing issues as the CSS styles do not seem to apply properly on it. Can someone help me solve this problem? ...

Bootstrap resource failed to load

I successfully connected the most recent version of bootstrap.min.css to my webpage using <link rel="stylesheet" href="assets/css/bootstrap.min.css">. Initially, everything was running smoothly. However, I now encountered an issue where my browser is ...

Arranging Boxes side by side

I am struggling to align three boxes horizontally on my website, as they are currently stacking vertically. I have implemented Twitter Boostrap's 'row' class in an attempt to achieve this layout. HTML: .img-box-kai { width: 300px ...

The essence of a character undergoes a complete transformation once it is presented in

There seems to be an issue with the character "т", ascii code: 209 130 When this particular character is put in italics, its appearance changes drastically... Check out the т character in italics (take a look at the source code - it's fascinating) ...

How can I use jQuery to set the text in a select element in HTML?

I have come across more examples of this, but unfortunately they do not seem to work. $(window).load(function () { $("#country").html('Please make a selection from the options below'); }); <select id="country"> <option value="None"> ...

Include an additional feature to an already established design

I have been attempting to move an element to the left using the transform property. However, there is already a pre-existing style with transform, which appears as: transform: translate3d(tx, ty, tz) What I am aiming for is to incorporate another property ...

The contrast between using the `$("selector").find` method and the `$("selector").contents().find()` method in jQuery

When it comes to navigation, I have developed two methods that involve obtaining the elements' offsets: $("#selector").contents().find('#'+list1).each(function(){ var offset= $(this).offset(); }); $("#selector").find('#&apos ...

How can I create a jumping animation effect for my <li> element in JQuery?

I have a horizontal navigation bar with a "JOIN" option. My goal is to make the #jump item continuously jump up and down after the page has finished loading. Currently, I have this code which only triggers the jump effect once when hovering over the eleme ...

Is there a way to incorporate a responsive side menu using JQuery or CSS3 that can shift the entire page layout?

Hey there, I'm currently trying to incorporate a responsive side menu into my website using either JQuery or CSS3. What I need is a side menu that will smoothly shift the page content when a link is clicked, and also adds a close button (X) to the men ...

Creating a dynamic div and populating it with data from various elements in separate xhtml files: a step-by-step guide

I am looking to dynamically add a div under the div tag with id "includedContent" in the code below. Additionally, I would like to modify the load method to accept an array of ids instead of a hardcoded Id(123) and display the data in the dynamically creat ...

Dynamic SVG circles with timer and progress animation

Is there a way to modify the following: var el = document.getElementById('graph'); // get canvas var options = { percent: el.getAttribute('data-percent') || 25, size: el.getAttribute('data-size') || 220, lineW ...