0

So, I have a container div with fixed width and height, and using jQuery to create grid divs inside of it, based on my input. The problem is I need borders on the grid, and they add space so divs don't fit inside the container. I found box-sizing: border-box property, but it does nothing for some reason. Initially I thought that maybe I needed -webkit- prefix since I'm using Chrome, but it's not that.

Any help? Bear in mind I just started learning.

HTML:

<DOCTYPE html>
<html>
    <head>
        <title>jQuery Sketch-pad</title>
        <link rel="stylesheet" href="css/sketch-pad.css">
    </head>
    <body>
        <div id="container">

        </div>

        <button id="clear-grid">Clear grid</button>

        <script src="js/jquery-3.1.0.min.js"></script>
        <script src="js/sketch-pad.js"></script>
    </body>
</html>

CSS:

#container {
    margin: 30px auto;
    border: 1px solid red;
    height: 960px;
    width: 960px;    
}

#container > div {
    border: 1px solid black;
    display: inline-block;
    box-sizing: border-box; 
}

.hovered {
    background-color: black;
}
rizbo61
  • 3
  • 1
  • 1
  • 4

1 Answers1

5

Your fix width is in #container not in inner div's.

box-sizing:border-box works well when you define fix width on them as they need to know what is the maximum width of the container.

If you will define box-sizing:border-box on #container then you will see it working but you need to define width on inner div's to make box-sizing:border-box working.

Read this for reference : https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Gaurav Aggarwal
  • 9,809
  • 6
  • 36
  • 74
  • Ok, but I can't use fixed width on inner divs because their width change depending on how many of them will be in the grid (based on my input). So basically the only thing I can do is use `outline` instead of `border`, right? – rizbo61 Aug 11 '16 at 10:02