Positioning elements on the web page using CSS tiles

Greetings! I am currently working on a website that utilizes tiles similar to this: https://i.sstatic.net/OzKQv.png

Everything seems to be in place, except for one tile that is not aligning with the rest. I am struggling to figure out how to position it correctly, and this roadblock is hindering my progress until I find a solution.

Here is a snippet of my Less code:

.tile-loop(@index: 1) when (@index <= 6){
  .tile-loop(@index + 1);
  &.t@{index}x1{
    width: (@index * @tile-width) + ((@index - 1) * 2 * @tile-margin);
    height: @tile-height;
  }
  // More code for different tile sizes...
}
.tiles {
    // Styling for the tiles container...
}

And here is a snippet of the HTML:

<div class="tiles">
            <div class="grid">
                // HTML markup for the tiles...
            </div>
        </div>

If you have any ideas or suggestions on how I can correctly position the misaligned tile, your help would be greatly appreciated. Thank you!

htmlcssless

Answer №1

Creating layouts like this with just CSS is not possible. Luckily, there are some excellent JS solutions available:

Answer №2

The design style known as Masonry layout is utilized to eliminate empty space caused by varying element heights within a grid layout.

Explore jQuery Masonry, a jQuery plugin designed to implement masonry layout.

Alternatively, consider utilizing CSS3 columns. However, due to compatibility issues, jQuery-based plugins are currently the preferred choice.

View the DEMO for a visual representation.

Answer №3

To fix this issue, you can easily reposition the misplaced div by using the following CSS:

.move-up {
    position:absolute;
    top: -@tile-height;
}

Simply assign the move-up class to the div that needs to be adjusted upwards.

Answer №4

When designing your layout, I recommend using floating "columns" containers with the necessary elements inside to ensure there are no structural issues.

Here is the suggested HTML and CSS code:

body {margin:0;}
* {box-sizing:border-box;}
.column {
    float:left;
}
.x1 {
    width:calc(50% - 10px);
    margin-right:20px;
}
.x2 {
    width:calc(50% - 10px);
}
.x3 {
    width:calc(33.3333% - 13.33333px);
    margin-right:20px;
}
.x4 {
    width:calc(33.3333% - 13.33333px);
    margin-right:20px;
}
.x5 {
    width:calc(33.3333% - 13.33333px);
}
.t3x4, .t2x3 {
    height:300px;
    margin-bottom:20px;
    width:100%;
}
.t3x2 {
    height:calc(150px - 10px);
    margin-bottom:20px; 
    width:100%;
}
.t2x1 {
    height:calc(100px - 10px);
    margin-bottom:20px; 
    width:100%;
}
.t2x2 {
    height:calc(200px - 10px);
    margin-bottom:20px; 
    width:100%;
}
.t1x1, .right {
    height:calc(100px - 10px);
    margin-bottom:20px; 
    width:calc(50% - 10px);
    margin-right:20px;
    float:left;
}
.right {margin-right:0px;}
<div class="tiles">
    <div class="grid">
        <div class="column x1">
            <div class="tile t3x4" style="background: red;"></div>
        </div>
        <div class="column x2">
            <div class="tile t3x2" style="background: blue;"></div>
            <div class="tile t3x2" style="background: green;"></div>            
        </div> 
        <div class="clear"></div>
        <div class="column x3">    
            <div class="tile t2x3" style="background: red;"></div>
        </div>    
        <div class="column x4">    
            <div class="tile t2x1" style="background: blue;"></div>
            <div class="tile t2x2" style="background: green;"></div>
        </div>    
        <div class="column x5">    
            <div class="tile t2x2" style="background: green;"></div>
            <div class="tile t1x1" style="background: green;"></div>
            <div class="tile t1x1 right" style="background: green;"></div>
        </div>
    </div>
</div>

Check out this JSFIDDLE example

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

Using AJAX to refresh a div upon submitting a form, instead of reloading the entire page

My SQL database generates a table that remains hidden until the search button is clicked to display the results. I want to use ajax to update the table without refreshing the entire page. Currently, when the page refreshes, the table reverts back to being ...

javascriptcssajaxhtml

Is there a way to circumvent the eg header along with its contents and HTML code using JavaScript?

I have a script in JavaScript that is designed to replace the content of data-src attribute within each img tag with src. However, I am facing an issue where this script interferes with the functionality of a slider located in the header section. The sli ...

javascriptjqueryhtmlimagesrc

The column is not properly aligned

I am facing a challenge in aligning 3 elements using bootstrap while working with Angular 8. To include only the necessary CSS from Bootstrap (such as col-md and col classes), I have added the following to my styles array: "styles": [ "src/ ...

cssangularsassbootstrap-4

Extracting <p> elements from a separate HTML file and cycling through them

I successfully created a website using only HTML, JavaScript, and jQuery without any server-side scripting or language. Within my website, I have a simple stream.html page that remains unstyled with no CSS formatting. <html> <head> </head& ...

javascriptjqueryhtml

What is the most efficient method for tallying the occurrences of the character "." in a webpage?

I am looking to analyze the content of an html page and tally up the occurrences of "." (period). Below is a snippet of code that accomplishes this task by reading the html and displaying the desired results. While considering modifying the existing code, ...

javahtml

What is the most effective method for incorporating multi-line breadcrumb links in a React application?

I am currently working on implementing a multiline breadcrumb link feature for mobile and tablet devices. As users navigate through multiple folders, I need to handle scenarios where the number of links exceeds the maximum allowed in the breadcrumb contain ...

javascripthtmlcssreactjs

The intl-tel-input dropdown feature is malfunctioning on mobile browsers

Currently, I have integrated the intl-tel-input library into my project for selecting international telephone numbers from a dropdown menu. https://i.sstatic.net/vPfpd.png While accessing the application on a web browser, the country flags display correc ...

cssangularjssassmobile-websiteintl-tel-input

Flexbox's bootstrap columns display issue on smaller screens with no wrapping

I am currently working on a section of my website where I have applied some CSS to 2 divs and an anchor tag in order to center the content vertically. However, I am facing an issue with the flex style properties when the window size is less than 768px. In ...

csshtmltwitter-bootstrapflexbox

Angular CodeMirror Line-Break function not displaying line numbers

I am currently utilizing Code Mirror from ngx-codemirror. My goal is to split the line when it fits within the width of the parent container. After searching, I found a couple of solutions that suggest using: lineWrapping: true Additionally, in the styles ...

cssangulartypescriptcodemirrorngx-codemirror

Could there be a coding issue stopping <div class="rating"> from aligning more centrally along the horizontal axis on the screen?

Just wondering, could there be something in my code that's preventing <div class="rating"> from moving closer to the center? And is there a way to make it move closer horizontally? (On a side note, CSS layout and positioning still puzz ...

htmlcssmedia-queries

Gathering information from a website by using BeautifulSoup in Python

When attempting to scrape data from a table using BeautifulSoup, the issue I'm running into is that the scraped data appears as one long string without any spaces or line breaks. How can this be resolved? The code I am currently using to extract text ...

pythonhtmlweb-scrapinghtml-parsingbeautifulsoup

Personalized Bootstrap 4 grid system

Could someone guide me on how to create this grid layout with Bootstrap 4? I am trying to achieve a design where one column stretches from the edge of the window to the inside, while the other column is half the width of a standard .container element. ht ...

cssbootstrap-4grid

issue with manipulating URLs in Express routing

Looking for assistance with Express routing. I want users to only see localhost:3000/page2 when they go to /page2, instead of localhost:3000/page2.html I have three HTML pages - page1.html, page2.html, and page3.html. I've created a server using Expr ...

javascripthtmlexpressroutespath

Guide: Creating a delete button that removes a designated post

I am encountering an issue with the delete button and dialog in my application. The button does not delete the correct post; instead, it always starts deleting from the first post that results in deleting all posts. Furthermore, the template does not displ ...

pythonhtmldjango

"Customize your map pins on Google Maps by updating the marker location through a

I am trying to update the position of a map marker based on a dropdown selection. Upon changing the dropdown option, I retrieve the latitude and longitude values and want to set these coordinates for my current marker. Here is the code snippet: $("#locati ...

javascriptjqueryhtmlgoogle-mapsgoogle-maps-api-3

Establish a table containing rows derived from an object

I am currently dealing with a challenge in creating a table that contains an array of nested objects. The array I have follows this schema: array = [ { id: 'Column1', rows: { row1: 'A', row2 ...

javascripthtmlangulartypescript

Tips for dynamically hiding/showing a button depending on the focus of two different HTML inputs

I'm working on a login section and looking to add a unique feature: When a user selects the email or password input field, I want the button text to change to 'LOGIN'. If neither input field is selected, the text should display 'NOT A ...

javascriptjquerycssanimation

Preserve current color during CSS keyframe animation transitions

I am currently working on developing a dynamic 'hinting' system. I am trying to figure out a way to make an element blink using only CSS, but I'm not sure if it's even possible. In the past, I believed that you needed to define the begi ...

csscss-animations

Drop Down Automation with Selenium IDE

Currently in the process of automating a User Acceptance Testing (UAT) for a software project at my company. I've completed all the typical tasks like recording actions and clicking on buttons, but ran into an issue with a drop-down menu. The problem ...

javascriptjqueryhtmlseleniumselenium-ide

Tips on increasing the button size automatically as the elements inside the button grow in size

I have a button with an image and text inside, styled using CSS properties to achieve a specific look. However, I encountered an issue where the text overflows outside of the button when it's too long. I want to find a way to wrap the text inside the ...

htmlcss