Assorted dimensions of square grid

Is it feasible to achieve the following using only HTML and CSS?

The condition is that since the divs are automatically generated in a list, they should not be nested within another HTML element (such as adding a div for each line is restricted):

Here is an example of how the HTML is structured:

<div class="s"></div>
<div class="s"></div>
<div class="big_s"></div>
<div class="s"></div>
<div class="s"></div>
<div class="s"></div>
<div class="s"></div>
<div class="s"></div>
<div class="big_s"></div>
<div class="s"></div>
<div class="s"></div>
<div class="s"></div>
<div class="s"></div>
<div class="s"></div>

This structure resembles a list.

I have been unsuccessful in my attempts to implement this so far. It seems that utilizing float:left and clear:both or display:inline-block is not solving the issue.

If anyone has any suggestions on how to accomplish this, I would greatly appreciate it!

Thank you.

Answer №1

The HTML code provided can achieve a layout close to what you're looking for with either float: left or overflow: hidden on the .bs class. Check out this link for an example: http://codepen.io/anon/pen/GIcAi (remember to comment out/comment in both lines in the last rule)

However, if you need more complex positioning that relies on absolute positioning and intricate selectors, modifying the HTML code may cause issues. This is where JavaScript comes in handy, especially for layouts like Masonry that require handling varying element heights due to factors like fonts and zoom levels.

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

Dynamic sliding box jumps instead of simply fading in/out

My app features both a navigation bar and a sub-navigation bar. Within the sub-navigation bar, users can click on a button that triggers the appearance of another sub-bar while hiding the original one. The new sub-bar should smoothly slide out from behind ...

The placement of footers remains consistent

Struggling with the placement of my footer on a website I'm designing. The footer should be at the bottom of the page with a set percentage margin, but it's not working as expected. Here is a link to My website Reviewing the footer CSS: .foote ...

Unusual spacing between lines on Chrome

I seem to be facing an issue related to line height and block height ratios. My font-size is set at 15px, line height at 1.5em (22.5px), and div height at: 16 lines * 1.5em = 24 em. Everything appears fine in Firefox and MS Edge - the div contains exactly ...

Avoid allowing text to spill out of the designated container

Hey there, I've run into this issue twice now and I can't seem to find a solution for the second occurrence. The first time it happened with an image, I used max-height and width to prevent it from overflowing the div when zoomed in. But now, for ...

Choose a dynamically generated html element without having to click on it

I've been looking for a way to target a dynamically-generated element (specifically a div with the class "date") using jQuery. While I keep finding references to the .on('click') method, it appears that this only selects the div once the pag ...

Tips on restricting dates to be equal to or earlier:

I have written a code to determine if two given dates are equal or not. The code should allow for the current date to be smaller than or equal to the provided date, but it should not allow for it to be greater. var date = '10-11-2015'; var toda ...

The document scales down automatically as I decrease the size of the window, but does not adjust when I switch to a mobile viewport

I've been working on developing a web app with a focus on mobile-first design. When I scale down my Chrome window, everything looks responsive and functions well, adjusting objects to fit the smaller screen size. However, I noticed that when I switch ...

My custom styles no longer seem to be applying after upgrading Angular Material from version 14 to 15. What could be causing this issue

Having some challenges with the migration from Angular 14 to Angular 15 when it comes to overriding material UI elements and themes. Looking for blog posts or documentation that can provide guidance on how to smoothly transition. Specifically, experiencin ...

CSS is malfunctioning on IE and Chrome browsers, yet it functions correctly on CodePen when using Chrome

We are experiencing issues with our CSS and HTML not displaying correctly in IE or Chrome. The text is not properly center aligned. Oddly enough, it works fine when viewed through Chrome on CodePen. The text is center aligned there. <html> <hea ...

Updating the CSS: Using jQuery to modify the display property to none

I am facing an issue with displaying an element that is defined as display:none in CSS. I tried to use the .show() function in jQuery, but it's not working as expected. Here's the code snippet: CSS .element { position: absolute; display: no ...

What could be causing the submission failure of the form post validation?

My Code: <form method="post" name="contact" id="frmContact" action="smail.php"> ... <label for="security" class="smallPercPadTop">Please enter the result:</label> <br /><h3 id="fNum" class="spnSecurity"></h3>& ...

What is the best way to add all the items from an array to a div element?

I am currently facing an issue where only the last object in my array is being added to my div using the code below. How can I modify it to add all objects from the array to my div? ajaxHelper.processRequest((response: Array<Vehicle.Vehicle>) ...

Creating visual content on Canvas using JavaScript

Having an issue with stacking multiple images on separate Canvas layers, and they're not drawing on the canvas. Can anyone help me figure out what I'm missing? Thanks CSS .positionCanvas{ position: absolute; left:0; righ ...

Encountering an error that states "this.push is not a function" when trying to select the 2nd or 3rd option

My goal is to extract elements from a drop-down menu and populate a list box based on the selection. The selected value from one list box should then be transferred to another list box, specifically from Available to Selected. However, while selecting Deve ...

The styles within a media query are not being successfully implemented

update: issue resolved. I discovered that there was a lingering media query in the css file that was meant to be removed. Also, I corrected some errors in the code. Thank you all for your help – it's now working perfectly. I have a set of html and ...

Enhance ngx-bootstrap's tab content with ngx-scrollbar functionality

Currently in my project, I am utilizing bootstrap 4 and ngx-bootstrap. One requirement I have is to develop a component consisting of 2 scrollable divs that can be switched by tabs. I was hoping to demonstrate a sample application on stackblitz, but unfor ...

Having trouble finding a solution to prevent code from automatically adding a class in jQuery/JavaScript?

I am currently in the process of customizing the FlexNav Plugin. I have made a modification to allow sub-menus to open on click instead of hover. However, a new issue has arisen where it requires two clicks to open a submenu. Upon investigation, I have i ...

CSS mysteriously malfunctions on certain iPhones

Key Concept Despite testing with responsive simulators and ensuring there were no issues, some iPhone users have reported problems with the style of my web page. Coding Essentials The page is designed to use 2 custom CSS files - one for screens larger t ...

The labels in production are getting cut off when creating a view in ASP .NET MVC

Upon viewing a Create View on my PC, I noticed that the main form and labels are adequately spaced: https://i.sstatic.net/1Q2bC.png However, once the website is deployed to IIS and accessed on the same PC with the same browser, everything appears cramped ...

Tips for breaking out of the foundation row and aligning with the right edge of the viewport

I have a CodePen example showcasing the Zurb Foundation grid. I am looking for a way to make a div extend to the right edge of the viewport while keeping the left edge in line with the grid as the viewport is resized. <div class="row"> <div cla ...