Arrange various Div elements of varying sizes in a predetermined sequence

Question

Arrange various Div elements of varying sizes in a predetermined sequence

I need to ensure that a large div maintains the same height as 20 other divs within the same container, when the screen size is between 1024px and 1920px in width.

The challenge lies in arranging all these items in a floated layout grid that looks clean and visually appealing.

The requirement is for the big div to occupy 60% of the container's width, while each small div takes up 20% width and floats next to the large one.

The structure should resemble the following:

<div class="container">

<div class="big-div" style="width: 60%;"></div>
<div class="small-div" style="width: 20%;"></div>
<div class="small-div" style="width: 20%;"></div>
<div class="small-div" style="width: 20%;"></div>
<div class="small-div" style="width: 20%;"></div>
<div class="small-div" style="width: 20%;"></div>
<div class="small-div" style="width: 20%;"></div>
<div class="small-div" style="width: 20%;"></div>
<div class="small-div" style="width: 20%;"></div>
<div class="small-div" style="width: 20%;"></div>

</div>

jquery html css flexbox css-grid

Answer 1

Answer №1

Here is the solution you've been looking for.

.container
{
    border: 1px solid black;
    display: flex;
    flex-wrap: wrap;
}

.big-div
{
    background:red;
    flex-basis: 50%;
    top:0;
    left:0;
}

.small-div
{
    background:blue;
    width:100px;
    color:white;
    flex-basis:25%;
}

.big-div, .small-div
{
    border:2px solid white;
    padding: 10px;
    font-family: sans-serif;
    box-sizing:border-box;
    align-self: flex-start;
    overflow:scroll;
}

<div class="container">
    <div class="big-div">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    <div class="small-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    <div class="small-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>

    (Repetition shortened for brevity)

</div>

Answer 2

Here is the solution you've been looking for.

.container
{
    border: 1px solid black;
    display: flex;
    flex-wrap: wrap;
}

.big-div
{
    background:red;
    flex-basis: 50%;
    top:0;
    left:0;
}

.small-div
{
    background:blue;
    width:100px;
    color:white;
    flex-basis:25%;
}

.big-div, .small-div
{
    border:2px solid white;
    padding: 10px;
    font-family: sans-serif;
    box-sizing:border-box;
    align-self: flex-start;
    overflow:scroll;
}

<div class="container">
    <div class="big-div">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    <div class="small-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    <div class="small-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>

    (Repetition shortened for brevity)

</div>

Answer 3

Answer №2

function resizeSidebar() {
          var bigDivHeight = jQuery(".small-div").height();
          jQuery(".big-div").css({'height':(bigDivHeight +'px')});
          jQuery(".big-div").height(bigDivHeight);
          var highestColumn = Math.max(jQuery('.big-div').height(),jQuery('.container').height());
          jQuery('.big-div').height(highestColumn);
          console.log("The highest column height is: " + highestColumn);
          console.log("The height of '.big-div' is: " + $('.big-div').height());
          console.log($(".big-div").css({'height':(jQuery(".small-div").height()+'px')}));
        }
        jQuery(document).ready(function() { 
            resizeSidebar();
            $(window).resize(function() {
                resizeSidebar();
            });
        });

Answer 4

function resizeSidebar() {
          var bigDivHeight = jQuery(".small-div").height();
          jQuery(".big-div").css({'height':(bigDivHeight +'px')});
          jQuery(".big-div").height(bigDivHeight);
          var highestColumn = Math.max(jQuery('.big-div').height(),jQuery('.container').height());
          jQuery('.big-div').height(highestColumn);
          console.log("The highest column height is: " + highestColumn);
          console.log("The height of '.big-div' is: " + $('.big-div').height());
          console.log($(".big-div").css({'height':(jQuery(".small-div").height()+'px')}));
        }
        jQuery(document).ready(function() { 
            resizeSidebar();
            $(window).resize(function() {
                resizeSidebar();
            });
        });

Answer 5

Answer №3

Here is an example of using CSS grid. In your HTML:

<div class="container">
  <div class="big-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div last-1"></div>
  <div class="small-div last-2"></div>
  <div class="small-div last-3"></div>
  <div class="small-div last-4"></div>
</div>

In your CSS:

.container {
  display:grid;
  grid-gap:10px;
  grid-template-rows:repeat(4, 1fr);
  grid-template-columns:repeat(6, 1fr)
}

.big-div {
  grid-column:span 4;
  grid-row:span 2;
}

.last-1 {
  grid-column:1/2;
  grid-row:4/5
}
.last-2 {
  grid-column:2/3;
  grid-row:4/5
}
.last-3 {
  grid-column:3/4;
  grid-row:4/5
}
.last-4 {
  grid-column:4/5;
  grid-row:4/5
}
.container > div {
  border:1px solid;
  background-color:green;
}

You can view this example on Codepen: https://codepen.io/gkilmain/pen/eKQjee

Answer 6

Here is an example of using CSS grid. In your HTML:

<div class="container">
  <div class="big-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div last-1"></div>
  <div class="small-div last-2"></div>
  <div class="small-div last-3"></div>
  <div class="small-div last-4"></div>
</div>

In your CSS:

.container {
  display:grid;
  grid-gap:10px;
  grid-template-rows:repeat(4, 1fr);
  grid-template-columns:repeat(6, 1fr)
}

.big-div {
  grid-column:span 4;
  grid-row:span 2;
}

.last-1 {
  grid-column:1/2;
  grid-row:4/5
}
.last-2 {
  grid-column:2/3;
  grid-row:4/5
}
.last-3 {
  grid-column:3/4;
  grid-row:4/5
}
.last-4 {
  grid-column:4/5;
  grid-row:4/5
}
.container > div {
  border:1px solid;
  background-color:green;
}

You can view this example on Codepen: https://codepen.io/gkilmain/pen/eKQjee

Arrange various Div elements of varying sizes in a predetermined sequence

Answer №1

Answer №2

Answer №3

Similar questions

switching tabs on a webpage

Please indicate the number of lines for the href within the span element

Is there a way to differentiate the color of an active link from an inactive one, so users can easily identify which link they are currently viewing?

Unusual body padding found in the mobile design

"Unraveling the Perpetual Animation D

Setting the appropriate width for the main div element using CSS

Issue with JQuery event handlers becoming unresponsive upon resizing the window

Unable to transfer AJAX data to PHP script

Swapping out data within a container

Submitted input in a text field is automatically displayed in a separate text box

The functionality of loading images with Jquery Ajax seems to only be working in Firefox. I have a feeling it may be due to a

Making an Ajax request to a RESTful web service from a different domain

Tips for locating the newly added row in jqgrid when reloadAfterSubmit is set to true

Is there a way to change the fill color of an SVG circle using Thymeleaf?

JavaScript and Responsive Design Techniques

Retrieve data from the controller of the selected element on the subsequent page using AngularJS

Floating container leads to delays

Adsense ad unit is not responsive and fails to display properly at dimensions of 320x50 px

What is the best way to obscure or conceal images of runners?

Gleaming R: Warning prompt or modal box input: invalid