CODEWITHSUNDEEP
css
Ahmad Rahimi
Ahmad Rahimi

Reputation: 31

How to divide parent width equally between its children in css

I want to some divs inside a parent div and i want them to be floated. i want that all the parent space be allocated to its children and to empty gap at end be created.

the number of child are determined by the parent width so i can not use percent.

example:

i want to set children divs width to 300 and the parent width is 1000 so 1000 / 300 = 3 divs will fit but i want that extra 100 pixel be divided equally between children. now if i set parent width too 1200 four children should fit in the parent.

i need some thing like this

width:calc(100% / (100% / 300)); --> children width

but actually it works if first division be floating point division and second be integer division. but there is no integer division or mod operator in css calc method.

any opinion...

Upvotes: 1

Views: 5505

Answers (3)

Ahmad Rahimi
Ahmad Rahimi

Reputation: 31

i find a solution to my need though it's not a complete general one

thanks for Danield answer. it was near to what i need

here is my the solution in less : (CODEPEN: see in action)

.child {
    float:right;
    height:80px;
    margin:5px;
    background-color:blue;
    box-sizing: border-box;
}


.looping (@item-width, @index) when (@index >= 1) {

    @media screen and (max-width: (@index * @item-width - 1px)) {
        .child {
            width: ~"calc((100% / (@{index} - 1)) - 10px)";
        }
    }

    .looping(@item-width, @index - 1);
}

.looping(250px, 10);

Upvotes: 0

Danield
Danield

Reputation: 125443

Here is a PURE CSS solution:

We can use a series of media queries to achieve this. With the media queries in place we can target all of the items after the current iteration to display:none.

Now this may sound like a cumbersome task, but if you are using a preprocessor such as LESS - this isn't such a difficult or error-prone task.

All we need to do is set up a few variables in the LESS mixin according to our needs.

Take a look....

CODEPEN (Resize to see this in action)

Usage is simple - just call the LESS mixin like so:

.box-layout(myList,li,100px,120px,1,9);

Where the mixin takes 6 parameters:

1) The list selector

2) The item selector

3) item minimun width

4) item-height

5) min cols

6) max-cols

Here's CSS (LESS) code:

body {
  margin: 0;
}

.box-layout(@list-selector,@item-selector, @item-min-width, @item-height, @min-cols, @max-cols)
{
  @layout-width: ((@min-cols + 1) * @item-min-width );
  @next-layout-width: ((@min-cols + 2) * @item-min-width);
  @layout-max-width: (@max-cols * @item-min-width);
  @layout-min-width: (@min-cols * @item-min-width);

  @minColsPlusOne: @min-cols + 1;

  @list: ~" `'\n'`.@{list-selector}";
  @item: ~" `'\n'`@{item-selector}";

  @{list} {
    display: table;
    table-layout: fixed;
    margin: 0 auto;
    min-width: 90vw;
    box-sizing: border-box;
    list-style: none;
    border: 5px solid aqua;
    overflow: auto;
    padding:0;
    color: white;
  }

  @{item} {
    height: @item-height;
    display: table-cell;
    background: green;
    &:nth-child(even) {
      background:tomato;
    }
  }
  @media (max-width: @layout-width) {
    @{list} {
      width: @layout-min-width;
    }
    @{item} {
      &:nth-child(n + @{minColsPlusOne}) {
        display: none;
      }
    }
  }
  @media (min-width: @layout-max-width) {
    @{list} {
      width: @layout-max-width;
    }
  }
  .loopingClass (@layout-width, @next-layout-width, @min-cols);
}

.loopingClass (@layout-width, @next-layout-width, @iteration) when (@layout-width <= @layout-max-width) {
  @next: @iteration + 1;
  @media (min-width:@layout-width) and (max-width: @next-layout-width) {
         @{list} {
           @{item} {
            &:nth-child(n + @{next}) {
              display: none;
            }
          }
        }
      }

  .loopingClass(@next-layout-width, @next-layout-width + @item-min-width, @iteration + 1);
}

.box-layout(myList,li,100px,120px,3,10);

Upvotes: 0

sodawillow
sodawillow

Reputation: 13176

If you only want to use CSS, you could handle multiple different cases with this kind of code (original idea : http://andr3.net/blog/post/142) - where div represents your childs here :

/* 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%;
}

Or use flexbox : http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 2

Related Questions