CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jeremy Hale
Jeremy Hale

Reputation: 3

How can I make variable amount of divs fill parent container 100%?

I'm trying to make a grid of divs depending upon user input. I.e - user puts in the number 10, I create a 10x10 grid of divs. The overall size of the grid, regardless of the number of squares inside of it, should be the same size.

I'm initially starting off the page with a 4x4 grid table at 1000x1000 pixels. The problem I'm running into is that if I just set the divs = 25% of the height/width of the container div, they don't fit (even with messing with negative margins to remove the space). I'm assuming this is because the parent div container has a border, and each div has a border, which all eat into the available space.

I can easily enough rig the sizes so that they fit. My problem is that I know once I start varying the amount of grids in the square, that fixed number will no longer work. How can I set the divs to fill the container, taking into account border sizes and whatnot? Here's what I have so far:

https://jsfiddle.net/14Lnera5/1/

.wrapper {
margin: auto 50 auto auto;
width: 1000px;
height: 1000px;
border: black 4px solid;
}

.indivCell {
display: inline-block;
border: black 1px solid;
background-color: #E0E0D1;
width: 25%;
height: 25%;  
margin: -1px;
}

I don't necessarily need the answer, but a hint or two would be great. I've been googling all over the place for this and everyone keeps saying just to set the size to a percentage, but I don't think that'll work as putting in more divs will increase the amount of borders inside of it and thus throw off the available space.

Thanks

Upvotes: 0

Views: 1158

Answers (2)

Bart Karp
Bart Karp

Reputation: 659

You're probably looking for box-sizing (it can be a real gamechanger once applied to every element on the page like below):

* {
    box-sizing: border-box;
}

(although in your case applying it to .indivCell alone would do the trick)

Also, you will have to set font-size to 0 on your container if you're using inline-block elements (otherwise the whitespace from the html source code also adds some space, you can always switch back to the desired font size by applyng font-size: somevalue to your children, in this case .indivCell):

https://jsfiddle.net/14Lnera5/4/

You can also fiddle with your HTML code to remove the whitespace like so:

http://jsfiddle.net/14Lnera5/8/

I'd strongly recommend to stick to inline-block instead of floats, floats are simply so much worse for your document flow.

Upvotes: 2

j08691
j08691

Reputation: 207901

There are two issues to contend with. First, inline elements are sensitive to white space in your code, so you either need to remove it, or do something like float the divs so that they collapse and eliminate the space.

The second issue is the box model (how much room an element actually occupies with regard to its dimensions, margin, and border) and how it's supposed across various browsers. The most common solution is to set box-sizing to border-box. As MDN explains, "The width and height properties include the padding and border, but not the margin."

Doing that should allow you to get your divs to fit as you want.

jsFiddle example

.indivCell {
    display: inline-block;
    border: black 1px solid;
    background-color: #E0E0D1;
    width: 25%;
    height: 25%;
    float:left;
    box-sizing:border-box;
}

Upvotes: 1

Related Questions