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

Methods for updating the value of a `<select>` element in an AngularJS controller

Within my HTML code, I have a select element with options ranging from 1 to 10: <select id="selVal" ng-model="product.quantity" ng-options="o as o for o in quantityValues" ng-change="updateDelta(product.quantity, {{product.quantity}}, product.selec ...

javascripthtmlangularjsselectng-options

Enhance your HTML audio player with added timeline functionality

I'm currently working on incorporating an HTML audio player into my project. I've managed to get the play/pause functionality to work, but now I'm stuck on adding a timeline feature. Additionally, I'm not sure how to implement the play/ ...

javascriptjquerycsshtmlaudio

What is the method for obtaining the entire object as a response following a click?

I am working on a basic JavaScript snippet: var image = [{name: "Breakfast", age: 100, author: "Alice"},{name: "Dinner", age: 10, author: "Teddy"}]; function gallery(name, content) { this.name = name; this.c ...

javascriptjqueryjquery-events

One jQuery plugin was functioning perfectly, while the other one was failing to work as expected

I am working on a simple HTML file that includes a heading and two empty div elements. <h1>Blablabla.</h1> <div id="div1"></div> <div id="div2"></div> These two divs need to be populated with SVG content generated usin ...

javascriptjquerysvg

Shifting the "active" designation within a dropdown menu to correspond with the user's current page

Recently, I decided to explore the Foundation framework. However, my first stumbling block was figuring out how to use the "active" class in a dropdown menu. I am hoping to have the class applied to the page link that is currently being viewed by the user ...

jquerycsszurb-foundationzurb-foundation-5

The code encountered an error because it was unable to access the property 'style' of an undefined element on line 13 of the script

Why is it not recognizing styles and showing an error? All paths seem correct, styles and scripts are connected, but it's either not reading them at all (styles) or displaying an error. Here is the html, javascript, css code. How can this error be fix ...

javascripthtmlcss

Is it possible to implement smooth scrolling in HTML without using anchor animation?

Is it feasible to implement a more seamless scrolling experience for a website? I'm referring to the smooth scrolling effect seen in MS Word 2013, but I haven't come across any other instances of this. I've heard that AJAX can make such th ...

javascriptjqueryhtmlcssajax

The Android WebView is unable to run JavaScript code in a local HTML file

Currently, I am attempting to load a local HTML file from the assets folder into a webview. Even though I can successfully load the HTML file in the webview, there seems to be an issue with the file's reliance on an external .js file for calculations. ...

javascriptjavaandroidhtml

Using jQuery UI to style div elements with dynamic titles

Is it possible to style a standard div container using the same styling as jQuery dialogs? I am looking to create a div panel with text content but with the title bar styling similar to that of jQuery UI dialog boxes. Appreciate your assistance in advance ...

htmlcssjquery-ui

Flexslider doesn't adjust the height of the viewport when displaying a shorter image in the slideshow

Is Flexslider not resizing its viewport height according to the current image on your site? The fixed height seems to be causing blank white space under shorter images. Are you inadvertently overriding Flexslider's responsive height function? Is there ...

htmlcssflexslider

When an anchor link is dynamically created, the `click()` method does not activate the click event

After creating an anchor element using the document.createElement('a') method, I encountered an issue where the click event was not being triggered as expected. To provide more context, refer to the code snippet below: var link = document.create ...

javascriptjqueryhtml

Error encountered on Facebook Like button: The large button is failing to show the total number of likes received

Despite functioning flawlessly for months, the large Facebook Like button has suddenly stopped showing the number of "Likes". Strangely, the compact version is still working fine, but the larger button is concealing the count. I am using a Mac and have obs ...

cssfacebook-like

Table with expanded width, cut off cell content

As I work on building an HTML table, I've encountered a challenge. The table code looks like this: This is the structure of my table: <table class="table" style="font-size:22px; width:100%"> I want to ensure that everything fits within the pa ...

htmlcsstwitter-bootstrap

The issue with ng-bind-html causing the disappearance of paragraph spaces

Is there a way to preserve paragraph breaks when using ng-bind-html to display text on the screen? I am having an issue where all the text appears as one big chunk if there are paragraph breaks in the data pulled from the database. Not sure what is causing ...

cssangularjs

Adjusting the size based on the screen width of various devices

I'm currently working on a website that is not responsive, and I know I can make it responsive using media queries. However, this will be a significant task... I'm looking for a quicker solution to simply zoom or scale my website to match the dev ...

jqueryhtmlcss

CSS properties for SVG image borders not displaying correctly

I'm having trouble creating a border around a round SVG image with the class "lock feature". When I try to add the border in the CSS element ".lock feature", the text "feature" stays white and the border doesn't show up in the browser. However, i ...

htmlcss

AutoComplete not functioning properly in ASMX file on IIS6 Windows 2003 virtual server

After developing an asp.net 4.0 AJAX/JQUERY Autocomplete.asmx webservice that worked perfectly on my localhost, I faced a challenge when trying to publish the website and transfer the files to an iis6 Windows 2003 virtual server. The service simply did n ...

c#jqueryasp.netweb-servicesasmx

Utilizing a fallback option for HTML5 video with a flash player and the ability to manipulate the

My dilemma involves an HTML5 video where I am utilizing jquery to interact with the player using the code snippet: video.currentTime += 1;. However, when Internet Explorer switches to Flash plugins, my JQ commands cease to function. How can I manage and co ...

javascriptjqueryflashhtml

Utilizing Ajax for Efficiently Updating a Singular Field within a Designated Object

How can I use Ajax to Update a Single Field in a Specific Object? I have a table in my postgres database with numerous records. I am interested in using a jquery Ajax request to update just one field in a particular object within that table. Is it possibl ...

javascriptjqueryajaxdjangodjango-rest-framework

What is the best method for inserting the HTML content from a specific div into a textarea?

Everything seems to be working fine, but once I insert the HTML into the textarea, an issue arises where the div gets wrapped within another div, causing the layout to break. var urls = []; $('body').on('click', '.btn_video&apos ...

javascriptjquery