I'm having trouble getting the smaller div to display right below the larger red div. I tried using the display block css property, but it doesn't seem to be working as expected.
Unfortunately, I can't provide an image here, but you can view it through this link:
Below is the HTML code snippet:
<!DOCTYPE html>
<html>
<head>
<title>Select Ye Favorite</title>
<link rel='stylesheet' type='text/css' href='css/list.css'/>
<link rel="stylesheet" type="text/css" href="jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" />
<!-- Remaining script imports are here -->
</head>
<body>
<div id='header'><h1 id='titleSite'>List Life</h1></div>
<div id='list'></div>
</body>
</html>
And here is the CSS code snippet:
![html, body
{
height: 100%;
}
/*
* {
border: 2px solid black;
}*/
#header{
/* z-index:1;
border-radius:5px;
background-color:#ECF7C6;
height:60px;
position:fixed;
margin-top:-20px;*/
z-index: 0;
position: fixed;
width: 98.75%;
margin-top: -2%;
margin-bottom:0.5%;
margin-left:0.25%;
margin-right:0.25%;
height: 100px;
border: 2px dashed black;
background-color:#FC3F4D;
border-radius:5px;
}
div{height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
margin:auto;
display:block;
position:relative;
}
div #titleSite{
position:relative;
top:10%;
color:white;
text-align:center;
font-family:Arial,sans-serif;
font-weight:bold;
border: 2px dashed white;
}][2]