Question

I am having issues with the below HTML when resizing the window;

1: Right bar suddenly drops down when the width is resized too small.

2: Spacing between the content and right bar gets larger as the width gets larger.

<style type="text/css">

#content {
  width: 80%;
  float: left;
  height: 500px;
  border:2px solid #00ff00;
}

#rightbar {
  max-width: 200px;
  width: 17%;
  float: right;
  border:2px solid #ff0000;
}

#rightbar a {
  display: block;
  padding: 5px;
  background-color: #F0F4FF;
  margin: 3px;
}
#rightbar a:hover { background-color: #1D3E93; color: #fff; }
</style>

<div id="content">contents</div>
<div id="rightbar">
  <a href="#">link 1</a>
  <a href="#">link 2</a>
  <a href="#">link 3</a>
</div>

Answer 1

There are two ways to get the result you want:

1. put the right bar before the content
   in the html, remove the width from
   the content and give it a right
   margin instead (width of the right
   bar + something extra)
2. position the right bar absolutely on the right, remove the width from
   the content and give it a right
   margin instead (see number 1.)

By the way, the problem is that you are mixing absolute and relative widths and what you see is exactly what you are supposed to see.

Edit: After re-reading your question, I think that with overflow:hidden (makes it a nice square block) on the content part, you can get it to work in combination with 1. without the margin:

<style type="text/css">

#content {
  overflow: hidden;
  height: 500px;
  border:2px solid #00ff00;
}

#rightbar {
  max-width: 200px;
  width: 17%;
  float: right;
  border:2px solid #ff0000;
}

#rightbar a {
  display: block;
  padding: 5px;
  background-color: #F0F4FF;
  margin: 3px;
}
#rightbar a:hover { background-color: #1D3E93; color: #fff; }
</style>

<div id="rightbar">
  <a href="#">link 1</a>
  <a href="#">link 2</a>
  <a href="#">link 3</a>
</div>
<!-- content needs to be placed after rightbar -->
<div id="content">contents</div>