Why can't I set the margin of this wrapper? - html

Question

I have a problem that I can't figure out despite an hour of YouTube videos and looking on here. I have 4 divs inside of a wrapper. I would like the wrapper to have a top margin of 27px, and a left margin of 2%. For the bottom and right sides, I would like it to automatically expand to the edge of the screen. (Viewport) What am I doing wrong here?
My code is below, and I have a fiddle at
However, the wrapper seems to do nothing and the div content starts at the edge of the screen no matter what I put in the CSS.
.wrapper {
margin: 27px auto auto 2%; // Does nothing
position:absolute;
}
#square1 { position:absolute; top:50%; width:50%;height:50%;left:0;background-color:blue}
#square2 { position:absolute; top:50%; width:50%;height:50%;left:50%;background-color:yellow}
#square3 { position:absolute; top:0; width:50%;height:50%;left:0;background-color:green}
#square4 { position:absolute; top:0; width:50%;height:50%;left:50%;background-color:red}
<div id="wrapper">
<div id='square1'></div>
<div id='square2'></div>
<div id='square3'></div>
<div id='square4'></div>
</div>

Answer 1

To select an element with id (wrapper in your code) you need to use '#' instead of '.'.
If you want to position something absolute, you need to position it direct/indirect parent relative, to let the browser know relative to which element place that absolutely positioned.
Also auto margins on right and left would center element (element is in the center if space from right and left are equal), but to span the element across you need to specify it's width. Keep in mind that margin in percents would be calculated from parent sizes.
Moreover if you have only absolutely position content inside element (wrapper) it would have zero height and you need to specify it explicitly.
As a side note, try to avoid repeting yourself. All squares have same properties, so combine it to new selector (square).
#wrapper {
position: relative;
width: 100%;
height: 100vh;
margin-top: 27px;
margin-left: 2%;
}
.square {
position: absolute;
width: 50%;
height: 50%;
}
#square1 {
top: 50%;
left: 0;
background-color: blue;
}
#square2 {
top: 50%;
left: 50%;
background-color: yellow;
}
#square3 {
top: 0;
left: 0;
background-color: green;
}
#square4 {
top: 0;
left: 50%;
background-color: red;
}
<div id="wrapper">
<div id='square1' class="square"></div>
<div id='square2' class="square"></div>
<div id='square3' class="square"></div>
<div id='square4' class="square"></div>
</div>

Answer 2

selector is incorrect, should be id or class
made wrapper relative so child can be absolute otherwise they will stack to window not parent div
made parent div 100% height and width
There is no point of giving auto margin to right and bottom
CSS comment should be /* */
#wrapper {
margin: 27px auto auto 2%;
position:relative;
width:100%;
height:100vh;
}
#square1 {
position: absolute;
top: 50%;
width: 50%;
height: 50%;
left: 0;
background-color: blue
}
#square2 {
position: absolute;
top: 50%;
width: 50%;
height: 50%;
left: 50%;
background-color: yellow
}
#square3 {
position: absolute;
top: 0;
width: 50%;
height: 50%;
left: 0;
background-color: green
}
#square4 {
position: absolute;
top: 0;
width: 50%;
height: 50%;
left: 50%;
background-color: red
}
<div id="wrapper">
<div id='square1'></div>
<div id='square2'></div>
<div id='square3'></div>
<div id='square4'></div>
</div>

Answer 3

your wrapper is not class, it is id. Thats why you should use #wrapper. And it actually works:
just because of position: absolute you don't see the result, because position: absolute works so, it's mean you are using it in wrong way. Read about position. The same result we can get with code below, or with flexs or grids.
#wrapper {
margin: 27px auto auto 2%;
height: 100vh;
}
.square {
width: 49.5%;
height: 50%;
display: inline-block;
}
#square1 {
background-color: blue;
}
#square2 {
background-color: yellow;
}
#square3 {
background-color: green;
}
#square4 {
background-color: red;
}
<div id="wrapper">
<div id='square1' class="square"></div>
<div id='square2' class="square"></div>
<div id='square3' class="square"></div>
<div id='square4' class="square"></div>
</div>