html things gets down when adding a div - html

Question

Please check the image:
Check the black circle.
This black circle contains the chart that was locates in the Service Level Per Campaing, but when I added the red area, the charts drop down as you see.
can you help me please?
I want to keep the chart in its correct location and put this red area above it.
This is the code:
<div style="width: 45%; float: left; margin-left:5%">
<div class="chartHeaderClass" style="width: 100%;">
<h3>Service Level Per Campaign</h3>
<%-- Start Dropdown Code --%>
<a id="DropdownSeviceLink" href="#">+</a>
<div ID="campaignDiv" runat="server" >
<ul>
</ul>
</div>
<script type="text/javascript" src="Scripts/DropdownCheckbox.js"></script>
<%-- End Dropdown Code --%>
</div>
The red area is the div with id campaignDiv I fill it dynamically.
The css of campaignDiv is:
#DropdownSeviceLink {
float:right;
margin-right:10px;
}
a#DropdownServiceLink:visited {
color:inherit;
}
#campaignDiv {
background-color:red;
width:200px;
height:200px;
float:right;
position:relative;
}
The whole code
http://jsfiddle.net/jdhMs/

Answer 1

If the red box has to be above then the most easy way to do this is to change the position:relative to absolute. (The parent div, chartHeaderClass, should have a position: relative).
#campaignDiv {
background-color:red;
width:200px;
height:200px;
position:absolute;
top: 0;
right: 0;
}