3

I would like to adjust the size of div inside parent based on the count of divs ?

For examples :

Let's say that parent size is 900px

  • If there is only one div inside the parent, I would like its size 100%

  • If there are two div inside the parent, I would like both the same size: 50%

  • If there are three div inside the parent, I would like both the same size: 33,33333%

  • If there are four div inside the parent, I would like both the same size: 25%

  • (...)

The maximum number of div is 4 but can be more.

Is it possible to do that only in CSS ?

Steffi
  • 6,835
  • 25
  • 78
  • 123

4 Answers4

2

Yes it is

Here is the CSS for that:

/* one item */
div:nth-child(1):nth-last-child(1) {
width: 100%;
}

/* two items */
div:nth-child(1):nth-last-child(2),
div:nth-child(2):nth-last-child(1) {
width: 50%;
}

/* three items */
div:nth-child(1):nth-last-child(3),
div:nth-child(2):nth-last-child(2),
div:nth-child(3):nth-last-child(1) {
width: 33.3333%;
}

/* four items */
div:nth-child(1):nth-last-child(4),
div:nth-child(2):nth-last-child(3),
div:nth-child(3):nth-last-child(2),
div:nth-child(4):nth-last-child(1) {
width: 25%;
}

an even shorter solution would be:

/* one item */
div:first-child:nth-last-child(1) {
width: 100%;
}

/* two items */
div:first-child:nth-last-child(2),
div:first-child:nth-last-child(2) ~ div {
width: 50%;
}

/* three items */
div:first-child:nth-last-child(3),
div:first-child:nth-last-child(3) ~ div {
width: 33.3333%;
}

/* four items */
div:first-child:nth-last-child(4),
div:first-child:nth-last-child(4) ~ div {
width: 25%;
}
Friedrich
  • 2,211
  • 20
  • 42
  • Yay ! Works great ! What does this character `~` ? – Steffi Jun 05 '14 at 08:43
  • Is this possible to make it work on IE with this syntax ? Example : `div:nth-child(1):nth-last-child(3)` to something like this `div:first-child + div + div` – Steffi Jun 05 '14 at 10:05
  • the ~ is the siblings selector, it will selects all siblings from the element selected before – Friedrich Jun 05 '14 at 10:08
  • 1
    I think this would work, see this question: http://stackoverflow.com/questions/8492121/ie8-nth-child-and-before – Friedrich Jun 05 '14 at 10:11
1

The code in SCSS

@for $i from 1 through 4 {
  li:first-child:nth-last-child(#{$i}),
  li:first-child:nth-last-child(#{$i}) ~ li {
    width: 100% / $i
  }
}
manuAcl
  • 311
  • 1
  • 10
1

Yes It can be done. using display: table; display: table-row and display: table-cell.

It works similar to table structure.

Check this

CSS

.table {
  display: table;
  width: 100%;
  margin-bottom: 10px
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  border: 1px solid #ccc;
}
Tushar
  • 4,280
  • 5
  • 24
  • 39
  • You need to add a width to your table-cell or this won't work with content - http://codepen.io/anon/pen/kqeAu – Pete Jun 05 '14 at 08:54
  • Why does your code work with adding a width `25%` and 2 or 3 cells... I don't understand... with the same code, my cells keeps the same size : 25% – Steffi Jun 05 '14 at 09:35
  • We just need to specify the width, It can also work it you set width: 50%; – Tushar Jun 05 '14 at 09:45
  • @Steffi can you post a fiddle where your code isn't working, tushar 50% won't work for tables with more than 2 cells – Pete Jun 05 '14 at 10:34
0

This will work using javascript, html and css.

HTML

<div id="outerDiv">

    <div class="innerDiv">
        hello
    </div>
 <div class="innerDiv">
        hello
    </div>
</div>

CSS

#outerDiv
{
   min-height: 500px;
    height:500px;/* any height you want. */
   width:250px; /* any width you want. */
   max-width:250px; /* any whatever width you want. */
border-style: solid;
    border-width: 2px;

}
.innerDiv{


/* height is set using JS */
   width:250px; /* same as outer div */
   max-width:250px; /* same as outer div */
border-style: solid;
    border-width: 1px;
    border-color: red;

}

JS

<script>
    window.onload=function(){
var x=parseInt(document.getElementsByTagName("div").length)
    x=x-1;
var y=Math.round(100/x);
var z=document.getElementsByClassName("innerDiv");
    for(var i=0;i<x;i++){
    z[i].style.height=y+"%";
    }

}
</script>

Here is the fiddle http://jsfiddle.net/6SMqw/2/

You can add as many inner divs as you want inside the outer div, just keep the class-name (innerDiv) same.

Mustafa sabir
  • 4,130
  • 1
  • 19
  • 28