Floating my div's using only CSS - html

Question

I am trying to get the "ChatBox" to float to the right side of the <main> tag, opposite side of Box1 and NavBox.
If I remove either Box1 or NavBox then it works. Otherwise I can only get it to the bottom of the page (when "ChatBox" is after the <main> tag), or to the right (when before the <main> tag), but it won't go to the top of the <main> box, it will start about 200px down.
The only HTML that can be changed is to move "ChatBox" about the <main> tag. Mostly has to done using CSS only.
http://jsfiddle.net/8em3m60m/26/
CSS
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background:#000;
font:normal 11px/13px Arial, Verdana, Lucida, Helvetica, sans-serif;
color:#c2c2bd;
}
#wrapper {
clear:left;
max-width:999px;
min-height:100%;
margin:0 auto;
border:0;
text-align:left;
}
.mainnav, .box-1 {
float:left;
clear: left;
vertical-align:top;
width:180px;
height:200px;
margin: 18px 0 0 8px;
}
.chatbox {
float:right;
vertical-align:top;
width:196px;
min-height:200px;
}
.main {
min-height:550px;
padding-top: 40px;
background: #7d7e7d;
margin-top:100px;
}
.main-1{
width: 548px;
margin-left:194px;
min-height:250px;
background-color: #3f3f3f;
padding:6px;
}
HTML
<div id="wrapper">
<div id="box-1" class="nav box-1">Box 1</div>
<nav id="navbar" class="nav mainnav">NavBox</nav>
<main id="main" class="main" role="main">
<div class="main-1">Main Content</div>
</main>
<div id="chatbox" class="chatbox">ChatBox</div>
</div>
EDIT: The only possible HTML change I can make is to move the ChatBox above, or below, the <main> tag.

Answer 1

Using Absolute Positioning
If you want to keep the HTML as you presented, you can use absolute positioning as follows.
You need to apply position: relative to #wrapper and then use suitable top and right offsets for .chatbox.
You need to specify a width or min-width to the wrapper or else you will get
some overlapping with the absolutely positioned element.
This solution may work but it depends on your other requirements regarding flexibility and responsiveness.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
background: #000;
font: normal 11px/13px Arial, Verdana, Lucida, Helvetica, sans-serif;
color: #c2c2bd;
}
#wrapper {
clear: left;
width: 999px;
min-height: 100%;
margin: 0 auto;
border: 0;
text-align: left;
position: relative;
}
.mainnav,
.box-1 {
float: left;
clear: left;
vertical-align: top;
width: 180px;
height: 200px;
margin: 18px 0 0 8px;
outline: 1px dotted yellow;
}
.chatbox {
vertical-align: top;
width: 196px;
min-height: 200px;
outline: 1px dotted yellow;
position: absolute;
right: 8px;
top: 18px;
}
.main {
min-height: 550px;
padding-top: 40px;
background: #7d7e7d;
margin-top: 100px;
outline: 1px dashed yellow;
}
.main-1 {
width: 548px;
margin-left: 194px;
min-height: 250px;
background-color: #3f3f3f;
padding: 6px;
}
<div id="wrapper">
<div id="box-1" class="nav box-1">Box 1</div>
<nav id="navbar" class="nav mainnav">NavBox</nav>
<main id="main" class="main" role="main">
<div class="main-1">Main Content</div>
</main>
<div id="chatbox" class="chatbox">ChatBox</div>
</div>

Answer 2

Without restructuring your HTML (which I would strongly suggest; it's a little unsemantic and nonsensical), you can achieve what you're looking for this way:
JSFiddle Example
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
background:#000;
font:normal 11px/13px Arial, Verdana, Lucida, Helvetica, sans-serif;
color:#c2c2bd;
}
#wrapper {
max-width: 999px;
min-height: 100%;
margin: 0 auto;
}
.box-1, .mainnav {
float: left;
clear: left;
width: 180px;
height:200px;
vertical-align:top;
margin: 18px 0 0 8px;
}
.chatbox {
float:right;
position: relative;
top: -200px;
vertical-align:top;
width:196px;
min-height:200px;
}
.main {
min-height: 550px;
padding-top: 40px;
background: #7d7e7d;
margin-top: 100px;
}
.main-1 {
width: 548px;
margin-left: 194px;
min-height: 250px;
background: #3f3f3f;
padding: 6px;
}
<div id="wrapper">
<div id="box-1" class="nav box-1">Box 1</div>
<nav id="navbar" class="nav mainnav">NavBox</nav>
<div id="chatbox" class="chatbox">ChatBox</div>
<main id="main" class="main" role="main">
<div class="main-1">Main Content</div>
</main>
</div>
I've moved your .chatbox element above .main, and have given it position: relative; and moved it 200px above the top position of where it would normally be, so that it is in line with Box 1. A better way to do this that doesn't require the position property would be to wrap .box-1 and .nav in a containing element, float the containing element left, and then move the .chatbox element above the .main element and float it right.

Answer 3

I usually would have used position:absolute for having the chatbox align on the right at the top. Your CSS would be;
.chatbox {
position:absolute;
top: 0;
right: 0;
width:196px;
min-height:200px;
}
This will align it to the top-right of the parent element of the chatbox.