HTML: Плавающее левое и правое разрешение / изменение размера проблем на%

Question

У меня проблемы с приведенным ниже HTML при изменении размера окна;

1: Правая полоска внезапно опускается при слишком малом изменении ширины.

2: интервал между содержимым и правой полосой увеличивается с увеличением ширины.

<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. поставить правильную полосу перед контентом в HTML, удалите ширину из содержание и дать ему право поле вместо (ширина справа бар + что-то лишнее)
2. поместите правую полосу абсолютно справа, уберите ширину с содержание и дать ему право вместо этого поле (см. № 1)

Кстати, проблема в том, что вы смешиваете абсолютную и относительную ширину, и то, что вы видите, это именно то, что вы должны видеть.

Редактировать: Перечитав ваш вопрос, я думаю, что с переполнением: скрытый (делает его хорошим квадратным блоком) в части контента, вы можете заставить его работать в комбинации с 1. поле:

<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>

Answer 2

1. Как только вы измените размер слишком мал, ширина в процентах будет меньше, чем текстовое содержимое вашего элемента. Браузер не может объединять слова, поэтому элемент должен иметь минимальную ширину. Попробуйте поместить элементы в оболочку с назначенной минимальной шириной.

2. Между этими двумя барами у вас есть пробел 3%. 3% от 1000 пикселей - это 30 пикселей. 3% от 2000 пикселей - это 60 пикселей. Поэтому, если ваш правый элемент является плавающим правым, имеет смысл увидеть это дополнительное пространство. Попробуйте переместить элемент влево.