Currently, I am working on a project for "The Odin Project" that involves creating a web page similar to an etch-a-sketch. I have made some progress, but I am facing a challenge with dynamically resizing a grid of divs.
The issue lies with the container div that I have set to 500x500px. Despite several attempts, the divs within the container do not fill up the space as intended. It seems like a simple CSS adjustment is needed, but I can't seem to pinpoint the exact solution.
CSS:
.outer {
width: 500px;
height: 500px;
position: absolute;
}
#gridtable {
width: 100%;
height: 100%;
}
.outtable {
background: #CCC;
min-height: 1%;
height: auto;
min-width: 1%;
width: auto;
position: absolute;
display: inline-block;
}
.newcolor {
background: blue;
min-height: 1%;
height: auto;
min-width: 1%;
width: auto;
position: absolute;
display: inline-block;
}
You can find the JSFiddle here.