Unexpected outcomes when generating jQuery pages using CSS

I have created a piece of JavaScript code that populates 3 divs with icons in even rows. However, I am facing an issue where my first two rows align as expected, but the third row starts aligned with .col-5. Can you help me troubleshoot this?

function row_content(row_number) {

    var output = "";

    switch (row_number) {
        case 1:
            icon_row = Array("Arrive", "Park", "Greet", "Sleep", "Wash", "Dress", "Shade");
            break;
        case 2:
            icon_row = Array("Watch", "Cook", "Dine", "Chat", "Chill", "Grill", "View");
            break;
        case 3:
            icon_row = Array("Dream", "Blog", "Splash", "Clean", "Play", "Work", "Design");
            break;
        default:
            return;         
}

    $j.each(icon_row, function(key, value) {
        icon = icon_content(key, value);
        output = output + icon;
    });

    return output;
}

function icon_content(col, name) {
    var opener = "<div id='" + name + "' class='icon col-" + col + "'><a href='#'>";
    var image = "<img src='img/icons/" + name + ".png' //>";
    var verb = "<div id='" + name + "-text' class='icon-verb'>" + name + "</div>";
    var closer = "</a></div>";

    var output = opener + image + verb + closer;

    return output;
}

function fill_rows() {
    $j('#icon-row-1').append(row_content(1));
    $j('#icon-row-2').append(row_content(2));
    $j('#icon-row-3').append(row_content(3));
}

I'm utilizing normalize.css and these are the associated CSS styles:

/* Icons */

.icon {
    float: left;
    padding: 12px;
    text-align: center;
    width: 114px;
}

.icon a {
    color: #fff;
    font-size: 23px;
    text-decoration: none;
}

/* Icon Rows */

.icon-row {
    position: relative;
    margin: auto;
    height: 165px;
    width: 966px;
}

Follow up: Here is the HTML structure for the setup.

<body>
    <div id="wrapper">
        <div id="header">
            <div id="nav"></div>
        </div>
        <div id="content">
            <div id="icons-wrapper">
                <div id="icon-row-1" class="icon-row"></div>
                <div id="icon-row-2" class="icon-row"></div>
                <div id="icon-row-3" class="icon-row"></div>
            </div>
        </div>
    </div>
</body>

Answer №1

It appears that the issue may be caused by one of the icon images having a slightly different height compared to the others. This difference is likely causing the alignment of the floats in the row below to be skewed. Please review the height of the icon located in the second row within the .col4 column.

------------------
|   |   |   |    |
------------------
|   |   |   |    |
-----___----------
        |   |   |   |    |
        ------------------

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

ViewCheck and every

Can IsInView be set to wait for all elements with the same class, instead of calling them individually? For instance, if there are three sections, can they be called like this: $(".section").on('inview', function(event, isInView) { i ...

Having difficulty altering the div color in real-time using VueJS

I'm currently in the process of building an application with Bootstrap and VueJS. My goal is to create a folder structure similar to Google Drive, where I want to make a div stand out in blue once it's selected. Below is the code snippet: ex ...

Clear the cache in Angular to remove the page

Within my current project, I am utilizing angular's $routeProvider to dynamically load pages into an ng-view section. The loaded pages are displaying correctly in the ng-view and are being cached for quick access without needing to make a new server r ...

Having trouble with implementing the .addclass function in a dice roller project

I'm looking to have the element with id=die load initially, and then on a button click event labeled "click me," apply the corresponding CSS class such as 'die1,' 'die2,' and so forth. function roll() { var die = Math.floor(Ma ...

Something seems off with the color of the getImageData when using Fabric JS getContext('2d')

Website: Currently, I am working on adding an eye dropper feature to my website. It functions perfectly at a resolution of 1080p, but when tested on higher or lower resolutions, it malfunctions. Here is the basic code snippet: var ctx = canvas.getContex ...

The login function in Nativescript Vue successfully returns a true value

Hello, I am currently using a function that is quite similar to this one with some minor tweaks here. However, I have encountered an issue when trying to log in to my REST API. Even if I input the incorrect username or password, it still authenticates me ...

Change the type of button in the Jquery UI dialog form to be submit

I'm struggling with my Ui dialog form using jquery. The Submit and Cancel buttons are currently set to type="button", but I want to change the type of the submit button to "submit". Does anyone know how I can achieve this? I've tried multiple ti ...

Ensuring your image matches the size of the containing div element

I am trying to create a navigation bar in the footer of my website using images. The footer should take up 10% of the total screen, and the images should also be contained within that 10%. However, I am having trouble with the images not scaling properly a ...

In what way does ReactJS enable me to utilize constant functions before they are declared?

I'm intrigued by the concept of using a value before defining it in ReactJS. Let's explore this through an example: function CounterApp() { const [counter, setCounter] = useState(0); const increaseValueTwice = () => { increaseValue() ...

Is there a way to modify the height and width of a div layer?

How can I adjust the height and width of the layer on the card? Also, I want only the close button to be clickable and everything else to be unclickable. Can anyone help me find a solution? <link rel="stylesheet" href="https://stackpath.bootstrapcdn. ...

Trouble with displaying label in PDF post HTML conversion using iText html2pdf

Software Versions: html2pdf v2.0.1 iText 7.1.1 The HTML label that spans the width of the page is as follows: <label class="test">Patient</label> CSS Styling: .test { display: block; font-weight: bold; color: #009fd1; font ...

What is the best way to ensure a container adjusts perfectly to its contents without constraining the contents to their minimum width?

Imagine you have a div with a flexible width (like min-width 200px and max-width 1000px). Let's refer to this div as Div1. The goal is to enclose this div in a parent div that adjusts its size to fit Div1 without impacting Div1's width whatsoever ...

html - automatically populating input fields when the page loads

Currently, I have an HTML form embedded in the view and I am looking for a way to automatically populate specific input fields with json variables obtained from the server. Instead of manually writing JavaScript code for each field, my goal is to access th ...

Is there a way to align six columns on the left side and have a dynamic column on the right that fills the width of the browser window?

Is there a way to make a fluid container in Bootstrap 5 that contains a normal container on the left with 6 columns of content, while allowing the right side of the container to expand to the end of the browser window? When using a normal fluid container, ...

Tips for effectively utilizing JavaScript regex to precisely match a string before triggering the submit button

I have a form in Angular with a text input field that requires the entry of lowercase letters separated by commas, like this: c, d, e, g, a, f etc... Currently, the submit button activates as soon as any part of the input matches the required format, allo ...

Show specific modal or image depending on various criteria

Seeking guidance on how to achieve the following tasks in a simple manner as my understanding of HTML, Bootstrap, and CSS is basic: 'When radio button #1, radio button #4, and button #2 are clicked, upon submission display modal 1 with an image at a ...

What steps can be taken to resolve webpage loading issues following data insertion into a database using express and node?

My express app has a post route handler (/addpost) for adding data to a database. Everything works perfectly, but the window keeps loading. To prevent the browser from waiting for more data, I know I need to send a response. However, all I want is for th ...

Tips for gently scrolling instead of quickly scrolling all at once

As a novice in HTML, I have a question about navigation to an ID targeted by an anchor tag. For example: When I execute this code, it quickly jumps to the specified ID but I would like to incorporate animations. Is there a way to achieve this? ...

Utilizing jQuery to Enable Multi-Checkbox Selection

Looking for the simplest way to obtain the selected checkboxes. This is my script: $(document).ready(function() { $("input[name='chkTextEffects']").change(function() { if ($("#cbSolid").is(':checked') == true) { ...

Create a "load additional data" button

I'm working on building my blog and I've run into a roadblock while trying to implement a load more button. Here's what I currently have: actions: { LOAD_ARTICLE_LIST: function ({ commit }) { axios.get('someurl/articles') ...