I'm struggling with positioning div classes in the normal way. I tried to create DIV boxes like this:
li {
width:200px;
height:200px;
background:red;
float:left;
list-style:none;
margin-right:20px;
margin-bottom:50px;
position:relative;
}
li div {
width:100%;
height:100%;
position:absolute;
}
However, the boxes ended up being positioned absolutely instead of in 2 columns with a gap of 20px and 50px underneath. They seem stuck as if inline, except for the 20px margin-right that's acting strange. The margin-bottom is working fine though.
Even after copying code from TutsPlus.com's CSS3 Essentials video, the issue persists. Everything seems fine with HTML5, but I can't figure out why I can't get the desired layout for these boxes.