How to make all divs the same size whether they have content or not?

Question

I am creating a battleship game, where there is a generated grid on the board, where each square is a colored box with a number, and is its own div. The problem I'm having is that when one of the divs gets some extra content in it, it makes that particular div longer than the rest of the divs, which throws off the whole grid. How do I make sure all of the divs are the same height no matter if they have extra content or not? I have tried adding a height property to the CSS, but it does not change the actual height of the colored box.

I guess all I need to know is if there is a CSS property that will make all the boxes the same height? I thought that would be height, but that does not change anything. — Brit24, Mar 22 '17 at 20:42

score 1 · Answer 1 · answered Mar 22 '17 at 20:42

1

You have to define how overflowing content is handled.

.cut-content {
    overflow: hidden;
}

answered Mar 22 '17 at 20:42

Marijan

1,825
1
13
18

what about if the user is using a table ? ;) – G-Cyrillus Mar 22 '17 at 20:48
The OP specifically states that she/he uses a 'div'. – Mr. Hugo Mar 22 '17 at 20:49
1

I hope the OP didn't set the div to `display: inline` or `display: table`. That would explain why setting the height has no effect as stated. ;) – Marijan Mar 22 '17 at 20:51
Good point! @Mary I updated my answer accordingly. – Mr. Hugo Mar 22 '17 at 21:10

Mr. Hugo · Answer 2 · 2017-03-22T21:11:41.033

0

The answer is height. You might be fighting specificity. Try the following:

.grid_div {
  height: 100px;
  height: 100px!important; /* if the previous does not work */
  max-height: 100px;
  max-height: 100px!important; /* if the previous does not work */
  overflow: hidden; /* just for the visual effect */
  display: inline-block; /* choose inline-block or block */
  display: block; /* choose inline-block or block */
}

edited Mar 22 '17 at 21:11

answered Mar 22 '17 at 20:45

Mr. Hugo

11,887
3
42
60

what about if the user is using a table ? ;) – G-Cyrillus Mar 22 '17 at 20:47
Then you go here: http://stackoverflow.com/questions/1554928/how-to-hide-table-row-overflow – Mr. Hugo Mar 22 '17 at 21:13
1

Why not, the op should post enough code that shows the issue, not us to guess what went wrong ;) – G-Cyrillus Mar 22 '17 at 22:11
Amen. You are preaching to the choir. – Mr. Hugo Mar 22 '17 at 22:48

How to make all divs the same size whether they have content or not?

2 Answers2