Question: For example,

```
<div class="container">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
    <div class="column">Column 4</div>
</div>

```

from the above HTML, I want to set 'column' width 25% if container div has 4 children. If it has only 2 children then 'column' width 50% wise versa.

Is there any way to do this using LESS framework. But should not use any script like javascript, jquery etc...

Any help would be appreciated !

Answer: 
Yes, there is an answer for the above question. Though it is not specific to LESS framework, we can acheive it through simple CSS properties.

All the CSS properties can be used in LESS. Hence it should be applicable in LESS framework.

It is really cool! Is it. Cheers!.

**Solution:**

Here is the working fiddle.

[jsfiddle](https://jsfiddle.net/antonysuthakarj/6wwoctbc/#&togetherjs=IgpObErozE "jsfiddle")

Here is the code.

HTML:

```
<div class="container1">
  <div class="column">Column 1</div>
</div>
<div class="container2">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>
<div class="container3">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

```

CSS:

```
.container1, .container2, .container3 {
 float: left;
 width: 100%;
}
.container1 .column, .container2 .column, .container3 .column {
  float: left;
}
.container1 .column {
  background: #ff0000;
}
.container2 .column {
  background: #ffff00;
}
.container3 .column {
  background: #ff00ff;
}
.container1 .column:first-child:nth-last-child(1) {
  width: 100%;
}
.container2 .column:first-child:nth-last-child(2), .container2  .column:first-child:nth-last-child(2) ~ .column {
 width: 50%;
}
.container3 .column:first-child:nth-last-child(3), .container3 .column:first-child:nth-last-child(3) ~ .column {
  width: 33.33%;
}

```

Result:

[![enter image description here](https://i.stack.imgur.com/uYPLV.png)](https://i.stack.imgur.com/uYPLV.png)
As said by Harry:

> 
> Less compiler has no way to find out how many siblings the element has
> 
> 
> 

But this is not a LESS problem, you can solve it with simple CSS using a common `display` value.

Look at this **[jSFiddle](http://jsfiddle.net/ldetomi/k250y184/)** that shows you how `.column` elements automatically adjust their width:

Core code is the following:

```
.container
{
    display:table;
    table-layout:fixed;
    width:100%;
}

.column
{
    display:table-cell;
}

```

That tells browser to treat elements as a **table** and inner **table-cells**.