How can I move the white box, also known as topBoxFlag, to the top of its parent container topBox? Despite my attempts with an absolute layout, it keeps getting pushed down below the red box due to the relative positioning. Is there a more efficient way to push it upwards without affecting other boxes in the layout? Perhaps utilizing something like float property to place it right at the top of its parent?
body
{
background-color: #C6E0F5;
}
#wrapper
{
position: relative;
margin: auto;
width: 1000px;
height: 2900px;
max-width: 1000px;
background-color: #C6E0F5;
}
#header
{
position: relative;
width: 100%;
height: 170px;
background-color: #00247D;
}
#navbar
{
position: relative;
width: auto;
bottom: 20px;
height: 35px;
text-align: center;
background-color: #CF142B;
}
#navbar ul li
{
list-style-type: none;
padding: 20px;
text-align: center;
font-family: "Trebuchet MS";
font-size: 25px;
display: inline;
}
#navbar ul li a
{
text-decoration: none;
font-weight: bold;
color: #fff;
}
.topbox
{
height: 400px;
width: 800;
margin: auto;
background-color: #00247D;
}
.topbox h1
{
font-size: 35px;
font-family: "Trebuchet MS";
text-align: center;
color: #fff;
width: 500px;
background-color: #CF142B;
}
.topbox #topboxFlag
{
float: right;
width: 300px;
height: 400px;
background-color: #fff;
}
.partybox
{
height: 400px;
width: 800;
margin: auto;
background-color: #00247D;
margin-top: 15px;
}
.partybox h1
{
font-size: 35px;
font-family: "Trebuchet MS";
text-align: center;
color: #fff;
width: 500px;
background-color: #CF142B;
}
<html>
<head>
<title>Learn which parties are doing what</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id = "wrapper">
<div id = "header">
<div id = "logo"></div>
</div>
<div id = "navbar">
<ul>
<li><a href="index.html">Major Parties</a></li>
<li><a href="minor.html">Minor Parties</a></li>
<li><a href="whyvote.html">Why Vote</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</div>
<div class = "topbox">
<h1>The Conservative Party</h1>
<div id = "topboxFlag"></div>
</div>
<div class = "partybox">
<h1>The Labour Party</h1>
<div id = "partyboxFlag"></div>
</div>
<div class = "partybox">
<h1>The Liberal Democrats</h1>
</div>
<div class = "partybox">
<h1>The UK Independence Party</h1>
</div>
<div class = "partybox">
<h1>The Green Party</h1>
</div>
<div class = "partybox">
<h1>The Scottish National Party</h1>
</div>
</div>
</body>
</html>