Align Div elements of different sizes in a specified order

Question

I want to keep the same height of a big div with another (lets say) 20 divs on same container between 1024px to 1920px max width;

The big deal is when I want to make all the items floated and to have a beautiful and clean layout grid.

Only the big div has to have 60% width from container, then all the small divs 20% and floated near to the big one.

The structure its like this:

<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>

research css grids and/or bootstrap and/or flexbox for this one. we will not make code from scratch. You need to share what you have tried. — Mihai T, Jun 25 '18 at 12:04
I did nothing till now because I dont know how to do it. All I did is that structure and I'm trying to make something with flex in order to make them also responsive. — Stefan Iordache, Jun 25 '18 at 15:22

Kilmazing · Answer 1 · 2018-06-28T15:41:19.697

0

Here ya go! CSS grid. 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>

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;
}

Codepen: https://codepen.io/gkilmain/pen/eKQjee

edited Jun 28 '18 at 15:41

answered Jun 25 '18 at 12:08

Kilmazing

526
7
14

I dont want to use float. Its better if I use flex because is more flexible – Stefan Iordache Jun 25 '18 at 15:20
Oh, you said float in your question `I want to make all the items floated`. Look at grid. Its for page layouts. Floats are great too but you might want to consider using flex on the individual layout components not the page layout. – Kilmazing Jun 25 '18 at 22:50
I cannot change the html so much. Its dynamic content Yii php. I have to make something with that structure from my post – Stefan Iordache Jun 27 '18 at 10:05
I feel your pain. Checkout update answer I'll be happy to answer any questions. No JS, pure CSS. – Kilmazing Jun 28 '18 at 15:41

Vignesh Raja · Answer 2 · 2018-06-27T13:05:50.483

This is what you need.

.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>
    <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>
    <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>
    <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>
    <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>
</div>

I don't have fixed height on elements. they are fluid. Also the grid must be responsive and the elements goes down (under the big div) by resizing the browser. — Stefan Iordache, Jun 25 '18 at 15:21
Thanks for answer but u dont follow my picture. The big div have the height of two small divs. — Stefan Iordache, Jun 27 '18 at 10:00
If you want that to be done via `flex`, then it should have fixed height and width. — Vignesh Raja, Jun 27 '18 at 12:10

score 0 · Answer 3 · answered Jun 27 '18 at 15:45

function sidebarHandler() {
          jQuery(".big-div").css({'height':(jQuery(".small-div").height()+'px')});
          jQuery(".big-div").height(jQuery(".small-div").height());
          var highestCol = Math.max(jQuery('.big-div').height(),jQuery('.container').height());
          jQuery('.big-div').height(highestCol);
          console.log(highestCol);
          console.log($('.big-div').height());
          console.log($(".big-div").css({'height':(jQuery(".small-div").height()+'px')}));
        }
        jQuery(document).ready(function() { 
            sidebarHandler();
            $(window).resize(function() {
                sidebarHandler();
            });
        });

Align Div elements of different sizes in a specified order

3 Answers3