HTML: Floating left and right resolution / resize problems by %

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

1. Once you resize too small, the percentages width will be smaller than the text content within your element. The browser cannot concatenate words, so the element is forced to have a min-width. Try putting the elements in a wrapper with an assigned min-width.

2. Between these two bars you have a space of 3%. 3% of 1000px is 30px. 3% of 2000px is 60px. Therefore if you right element is floating right, it makes sense you'll see that additional space. Try floating the element left.

Answer 2

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>