I'm baffled by this unsemantic grid - why is the final div getting pushed below the rest?

I am working with the unsemantic fluid grid system and aiming to create a row of divs that are all in line and together cover 100% of the page.

<div class="grid-container">
  <div class="grid-parent yy name-strip zz"> 
    <div class="yellow-pink-border mobile-grid-20 xx"></div> 
    <div class="green-blue-border mobile-grid-40 xx"></div>
    <div class="red-yellow-border mobile-grid-15 xx"></div>
    <div class="yellow-pink-border mobile-grid-20 xx"></div>
    <div class="green-blue-border mobile-grid-5 xx"></div> 
  </div>
</div>

Calculating it, the total percentage should add up to 100% so why does the last div (green-blue-border mobile-grid-5) move down to the next line when the browser window is resized, typically around 200px on jsfiddle's result?

http://jsfiddle.net/WNRbS/9/

Despite following the same breakpoint, I cannot seem to figure out what might be causing this issue.

htmlcssfluid-layout

Answer №1

Locate this and substitute it

JSBIN LINK http://jsbin.com/lvtrvd/44Jnx/

.grid-5, .mobile-grid-5, .tablet-grid-5, .grid-10, .mobile-grid-10, .tablet-grid-10, .grid-15, .mobile-grid-15, .tablet-grid-15, .grid-20, .mobile-grid-20, .tablet-grid-20, .grid-25, .mobile-grid-25, .tablet-grid-25, .grid-30, .mobile-grid-30, .tablet-grid-30, .grid-35, .mobile-grid-35, .tablet-grid-35, .grid-40, .mobile-grid-40, .tablet-grid-40, .grid-45, .mobile-grid-45, .tablet-grid-45, .grid-50, .mobile-grid-50, .tablet-grid-50, .grid-55, .mobile-grid-55, .tablet-grid-55, .grid-60, .mobile-grid-60, .tablet-grid-60, .grid-65, .mobile-grid-65, .tablet-grid-65, .grid-70, .mobile-grid-70, .tablet-grid-70, .grid-75, .mobile-grid-75, .tablet-grid-75, .grid-80, .mobile-grid-80, .tablet-grid-80, .grid-85, .mobile-grid-85, .tablet-grid-85, .grid-90, .mobile-grid-90, .tablet-grid-90, .grid-95, .mobile-grid-95, .tablet-grid-95, .grid-100, .mobile-grid-100, .tablet-grid-100, .grid-33, .mobile-grid-33, .tablet-grid-33, .grid-66, .mobile-grid-66, .tablet-grid-66 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 0px;
    padding-right:0px;

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

Generating an interactive Datepicker using Jquery

How can I design a dynamic date picker similar to the image provided below? I have attempted to create one, but I am looking for a more interactive date picker. Is there a way to achieve the design shown in the image? The current date picker does not meet ...

javascriptjqueryhtmlcsstwitter-bootstrap

Displaying text and concealing image when hovering over a column in an angular2 table

I am currently using a table to showcase a series of items for my data. Each data entry includes an action column with images. I would like to implement a feature where hovering over an image hides the image and reveals text, and vice versa (showing the im ...

htmlcssangularclassng-style

What causes CSS animations to suddenly halt?

Recently, I've been delving into the world of CSS animations and experimenting with some examples. Below is a snippet of code where two event handlers are set up for elements, both manipulating the animation property of the same element. Initially, th ...

javascripthtmlcsscss-animations

Error in jQuery submenu positioning issue

I am attempting to design a menu that opens when the parent element is clicked and closes when the mouse leaves the previously opened one. It should operate from left to right. Here is an example: <ul class="menuFirst"> <li><im ...

javascriptjqueryhtmlcss

Interactive Div Updates Dropdown Selections Automatically

// function to add set of elements var ed = 1; function new_server() { ed++; var newDiv = $('#server div:first').clone(); newDiv.attr('id', ed); var delLink = '<a class="btn btn-danger" style="text-align:right;m ...

javascriptjqueryhtml

Styling trick: Positioning a paragraph next to a span filled with SVG icons

I am facing an issue with the alignment of a set of SVGs contained within a <span> element appearing below a <p> element. I want the span to line up with the text 'Question 1'. Methods I have attempted: No conflicting margins or pa ...

cssalignment

Employing setInterval() without clearing previously triggered events

Can someone clarify the distinction between these two functions: function displayTime(){ var current = new Date(); var hours = current.getHours(); var minutes = current.getMinutes(); var seconds = current.getSeconds(); ...

javascripthtmlsetinterval

How to customize the color of radio buttons in JFXRadioButton using CSS

I am facing an issue with customizing the styling of JFXRadioButton component from this library : jfoenix.com I want to modify the color of the circle, but the default class is not working. Are there any suggestions or solutions available? (The colors me ...

cssjavafx

Choose all the alternative A radio buttons utilizing JavaScript

If the "4 stars" option is selected at the top, I want all corresponding "4 stars" options in the form to be automatically selected. Similarly, if "3 stars" is chosen, I need all the "3 stars" options to be selected. I attempted to achieve this functionali ...

javascriptjqueryhtmlradio-buttonradio-group

In search of the HTML code for the forward button when extracting content from a webpage

While using Power Automate Desktop to scrape a webpage, I encountered an issue with clicking the next button. Even after copying the HTML code within the developer tools of the webpage, I found that both the previous and next buttons had the same path, mak ...

htmlpower-automate-desktop

What could be the reason why certain animations fail to run on specific icons when hovering over the parent element?

I recently launched my website which features a series of tabs with unique icons. Some of the icons, labeled as soap-icon, have animated effects while others, categorized under icomoon-icon, do not. Upon checking the console, I discovered that the animati ...

jqueryhtmlcssanimation

Looking to tilt text at an angle inside a box? CSS can help achieve that effect!

Hey there, is it possible to achieve this with CSS or JavaScript? I require it for a Birt report. ...

javascriptcssbirt

determining CSS selector

Having trouble identifying a locator using CSS. There are 10 elements with the same locator name on the webpage. Each web element has the same XPath value: //div[@class='thumb_image'] The web element list size is 10. If I want to access the 5t ...

cssselenium

Semantic UI table with rowspan feature

I am a beginner with semantic ui and I have been trying to replicate this specific layout. While going through semantic ui's documentation, I found something similar but not quite identical. Below is the HTML code: <div class="ui celled grid cont ...

htmlcsssemantic-ui

Can someone help me troubleshoot the issue I'm having with this jQuery API function?

Greetings everyone, I'm facing an issue with my jQuery code. I am attempting to use the CoinMarketCap API from cryptokickoff to showcase cryptocurrency statistics on my website. I understand how to display them, but the appending process to my column ...

jqueryhtmlapi

A guide to spinning an image in every direction with CSS

I'm working on rotating an image in all directions using CSS and Vue.js. To demonstrate this, I have created a CodePen with the necessary code below. <div id="app"> <v-app id="inspire"> <div class="text-xs-center image-rotation" ...

htmlcssvue.jssass

Is there a way to maintain the selected position on the drop-down menu for users?

Whenever I choose an option from the drop-down field in my form, it automatically jumps back to the top of the page. Just to clarify, I have a drop-down menu at the top of the page and several input fields below. Users need to scroll down to reach the dro ...

javascripthtmldrop-down-menu

jsoup - locate element and delete it along with the element preceding it

In my Android app, I am working on extracting data from a stock market historical prices table. However, there are certain rows in the table that need to be removed for clarity. Specifically, I am trying to remove a row in the third tr. I have managed to r ...

androidhtmljsoup

A step-by-step guide to showcasing dates in HTML with Angular

I have set up two datepickers in my HTML file using bootstrap and I am attempting to display a message that shows the period between the first selected date and the second selected date. The typescript class is as follows: export class Datepicker { ...

htmlangulartypescript

Issue with Bootstrap dropdown menu not showing up/functioning

I've spent the entire day trying to find a solution and experimenting with various methods, but I'm still unable to get it to work. The navbar-toggle (hamburger menu) shows up when the window is resized, but clicking on the button doesn't di ...

htmltwitter-bootstrapcssmenu