Increase the height and width of the inner divs to match the outer div while reducing the number of inner divs

Within my HTML structure, I have three vertical divs that each contain multiple inner div elements.

I am looking to achieve a responsive layout where the inner divs wrap into either a 2-column or 1-column grid based on the browser's height and width. As the browser is resized, I want the inner divs to adjust their size dynamically to fill any extra space left over from wrapping.

When resizing the browser, the layout should look like the image shown below:

Here is the current structure of my HTML code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body {
    height: 100%;
    font-size: 100%;
}

.main {
    border: 2px solid black;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    left: 0px !important;
    top: 0px !important;
    z-index: 1 !important;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    overflow: hidden;
}

.verticalReports {
    width: 32%;
    border: 1px solid black;
    height: 100%;
    float: left;
    overflow:hidden;
}

.verticalTiles {
    width: 30%;
    height: 20%;
    background-color: #e0d8ed;
    margin-left: 10px;
    margin-top: 13px;
    float: left;
}
</style>

</head>
<body>
    <div class="main">
        <div class="verticalReports">
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>

        </div>

        <div class="verticalReports">

            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
        </div>

        <div class="verticalReports">
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
            <div class="verticalTiles"></div>
        </div>
    </div>
</body>
</html>
jqueryhtmlcss

Answer №1

Consider implementing media queries for different screen sizes.

@media (max-width: 940px) {
    .verticalTiles {
        width: 45%;
    }
}

Explore this JSFiddle link for a live example.

You may also want to check out responsive grid systems like Responsive.gs or Gumby Framework Grid.

Answer №2

Utilizing JavaScript is unnecessary in this scenario. The issue in your provided example arises from having three elements that are 30% wide each with a 10px margin to the left. When resizing the browser, the combined width of the three tiles surpasses the remaining 10% of tile width, causing them to no longer fit. Consider using relative values for the margin, such as margin-left: 3% instead.

In light of your feedback, a solution along these lines may prove effective:

    function adjustWidth() {
    var tenPercent = $('.verticalReports').width() / 10;
    if ( tenPercent < 30 ) {
        $('.verticalTiles').css('width','45%');
    }
}
$(document).ready(function() {
    adjustWidth();
    $(window).resize(function() {
        adjustWidth();
    });
});

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

Concealing a section of a table with JavaScript while preserving the original table structure

I made some adjustments to the script tag: $(document).ready(function) { Now, the evenTd's are hidden correctly. Here is the table with the code provided: <table> <tr> <td>itemOne</td> <td class="even ...

javascriptjqueryhtmlcssshow-hide

NextJS compilation sometimes results in undefined errors when using Sass styles

My peace lies in the sass code: .link display: inline-table text-align: center align-self: center margin: 5px 15px font-size: 20px color: black text-decoration: none transition: 0.1s ease-in-out .link:hover text-decoration: underline .l ...

csstypescriptsassnext.jstsx

Looking for assistance with extracting only numerical values from a webpage using Selenium in Python

Website Elements <td style="font-size:20px;font-family:LucidaGrande,tahoma,verdana,arial,sans-serif;padding:10px;background-color:#f2f2f2;border-left:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;border-bottom:1px solid #ccc; ...

pythonhtmlselenium-webdrivernumberscopy

What Could Be Causing My Webfonts to Be Inaccessible on Windows Devices and iPhones?

I recently created a simple holding page on www.tomrankinmusic.com The Webfonts I embedded in the page display correctly in the latest versions of Firefox, Safari, and Chrome on Mac OSX Lion 10.7.4 but do not show up in Chrome and IE6 on Windows XP Pro, d ...

htmlcssfontswebfonts

Verifying the timestamp of file submission in a form

My goal is to create an HTML form that allows users to send a file to my server, while also recording the exact time they initiated the file transfer. However, I'm facing an issue where only the time the file is received is being logged, rather than w ...

javascriptphpjqueryhtmlajax

Use JavaScript to illuminate individual words on a webpage in sequence

Is there an effective method to sequentially highlight each word on a web page? I'm thinking of breaking the words into an array and iterating through them, but I'm not sure what the best approach would be. I have experience with string replacem ...

javascripthtmlstringhighlighting

Showing JSON data on a webpage

Hey there, I'm looking to showcase information from a MySQL table in an HTML document. Currently, I have a PHP script that is up and running: <html> <head> </head> <body> <?php $mysqli = new mysq ...

phphtmlmysqlajaxjson

How can I align a sub-submenu horizontally using CSS?

I've built a nested menu using the ul/li tags, and I'm looking to align the second and third sub-menus horizontally with the first submenu. Here is my current visual layout: , and this is what I want it to look like: CSS/HTML: body { back ...

htmlcss

Using Jquery to eliminate the selected option from the second dropdown list after choosing from the first

Currently, I have implemented this code to enable me to choose an item from dropdown 1 and then remove the same item from dropdown 2. $("#BoxName").change(function(){ var selectedItem = $(this).val(); var nextDropdown = $(this).parent("td").nex ...

jqueryselectiondropdownbox

How to modify an array in an HTML document using BeautifulSoup

Running a Python script, I am trying to access a local HTML file containing a JavaScript array inside a script tag that needs updating. Here is the test code snippet: from bs4 import BeautifulSoup html = ''' <script> var myArray ...

pythonhtmlbeautifulsoup

What could be causing the unexpected white gap within my div element even though I've adjusted its dimensions to be minimal?

<div style=" height:0; width: 0 ; border: 1px solid black ; "> This code snippet displays a div element with a specified height, width, and border color. However, there seems to be an issue with the rendering as some st ...

htmlcss

Struggling with jQuery fadeIn and fadeOut in IE8?

I am struggling to understand why my fadeIn, fadeOut, and corner() functions are not working in IE8 on my website at . They were functioning properly before, but now they seem to be broken. Can anyone pinpoint the issue causing this problem? If you click ...

javascriptjqueryajaxinternet-explorer-8fadein

Create a variety of elements in real-time

My goal is to utilize JavaScript in order to generate a specific number of input boxes based on the user's input. However, I encountered an issue where using a for loop only creates one input box and then appends this same input box multiple times. f ...

javascriptjquery

Converting the stage object to JSON format and incorporating it into an HTML5 environment using

$("#show").click(function(){ var stage = Kinetic.Node.create(json, 'container2'); var ball = new Image(); var cone = new Image(); var tshirt = new Image(); ball.onload = function() { stage.get('.ball').apply ...

jqueryhtmlkineticjs

Ways to modify the background images in doxygen

Currently, I am facing a challenge while customizing Doxygen's output and my main roadblock is the menu bar. To address this issue, I decided to generate custom CSS and HTML files provided by Doxygen by executing the command: doxygen -w html header. ...

htmlcssdocumentationdoxygen

beforeprinting() and afterprinting() function counterparts for non-IE browsers

Is there a way to send information back to my database when a user prints a specific webpage, without relying on browser-specific functions like onbeforeprint() and onafterprint()? I'm open to using any combination of technologies (PHP, MySQL, JavaScr ...

phpjavascriptmysqlhtmlonbeforeprint

Creating a script to open multiple URLs in HTML and JavaScript

Currently, I am working on creating a multiple URL opener using HTML and JavaScript. However, I have encountered an issue where HTTP links are opening fine but HTTPS links are not. Can someone provide assistance with this problem? Below is the code snippet ...

javascriptjqueryhtmlcss

Spinning text within a circular rotation in CSS

Looking for guidance on how to center the "hallo" text inside a circle? Currently experiencing issues with the circle display in IE8 and Firefox. Any suggestions on how to fix this would be greatly appreciated. And here is the link to my code snippet: CSS ...

javascripthtmlcss

Is it possible for a website to be compromised by incorporating CSS within HTML code?

I'm currently working on developing a shopping cart component in React, but my supervisor has advised against using CSS directly in the HTML markup due to security concerns. While I understand the importance of good coding practices, I fail to see how ...

htmlcssreactjsmaterial-uiwebsecurity

Is it Possible to Load JSON Data as Columns Instead of Rows in Datatables?

My understanding is that typically, with Jsons and Datatables, each record is loaded as a row of data for the table. I am looking for a way to load json data as columns instead of rows in DataTables. However, I have not found a suitable method to achieve ...

jqueryjsondatatables