ASDFGH. Hi there, currently learning HTML and attempting to create a Mondrian-style image. However, I seem to be only able to display six boxes, with the last three (boxes 7, 8, and 9) not showing up. Here is my code. Could someone please help me figure out what mistake I might be making? I am fairly new to this and wondering if it could be an issue with pixel limitations on the page. My Mac has a 2560x1600 iris display. Edit: I have experimented with changing the positioning attribute for the last three boxes to absolute, static, fixed, and various other options, but they still do not appear. I have tried debugging in different ways but haven't been able to identify the error.
<!DOCTYPE html>
<html>
<head>
<style>
div.box1 {
float: left;
background-color: white;
width: 150px;
height: 5px;
padding: 30px;
border-style: solid;
border-width: 0px 15px 15px 0px;
/* Border widths: Top.px Right.px Bottom.px Left.px */
}
div.box2 {
float: left;
background-color: white;
width: 300px;
height: 5px;
padding: 30px;
border-style: solid;
border-width: 0px 15px 15px 0px;
}
div.box3 {
float: left;
background-color: yellow;
width: 200px;
height: 5px;
padding: 30px;
border-style: solid;
border-width: 0px 15px 15px 0px;
}
div.box4 {
position: relative;
left: 0px;
top: 80px;
background-color: white;
width: 30px;
height: 100px;
padding: 30px;
border-style: solid;
border-width: 0px 15px 15px 0px;}
div.box5 {
position: relative;
left: 80px;
bottom: 95px;
background-color: red;
width: 270px;
height: 150px;
padding: 110px;
border-style: solid;
border-width: 0px 15px 15px 15px;}
div.box6 {
position: relative;
left: 585px;
bottom: 494px;
background-color: yellow;
width: 160px;
height: 60px;
padding: 50px;
border-style: solid;
border-width: 15px 15px 15px 15px;}
}
div.box7 {
position: relative;
right: 50;
bottom: 50px;
background-color: yellow;
width: 50px;
height: 60px;
padding: 50px;
border-style: solid;
border-width: 15px 15px 15px 15px;}
}
div.box8 {
position: relative;
right: 50;
bottom: 50px;
background-color: yellow;
width: 50px;
height: 60px;
padding: 50px;
border-style: solid;
border-width: 15px 15px 15px 15px;}
}
div.box9 {
position: relative;
right: 50;
bottom: 50px;
background-color: yellow;
width: 50px;
height: 60px;
padding: 50px;
border-style: solid;
border-width: 15px 15px 15px 15px;}
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
<div class="box7">7</div>
<div class="box8">8</div>
<div class="box9">9</div>
</body>
</html>
Appreciate any assistance provided.