автоматическая ширина, проценты и фиксированная ширина, приводящие к переносу DIV

Question

Я хотел бы иметь страницу с тремя столбцами, где у середины есть динамическая ширина (изменение размера окна) И минимальная (div #middle: min-width:400px;).

Проблема в том, чтотретий столбец переносится, когда я изменяю размер.

Я знаю, если я заменит #middle div width:75%; на width:500px;, это будет работать, а правый столбец не будет переноситься, но у меня не будет динамической ширины в серединеколонка больше ...

Как мне решить это?

#contentwraper {
  position: relative;
  min-width: 800px;
}

#left {
  position: relative;
  float: left;
  background-image: url("http://www.artetics.com/images/artfrontpageslideshow.png");
  background-repeat: no-repeat;
  background-position: center center;
  min-width: 128px;
  width: 12%;
  height: 128px;
}

#middle {
  position: relative;
  float: left;
  min-width: 400px;
  width: 75%;
  text-align: center;
}

#right {
  position: relative;
  float: left;
  background-image: url("http://www.emoticonswallpapers.com/avatar/art/Test-Card.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  min-width: 128px;
  width: 12%;
  height: 128px;
}

.imagemiddle {
  position: relative;
  float: left;
  background-image: url("http://www.tradewindscientific.com/images/t_logo.gif");
  background-repeat: no-repeat;
  background-position: center center;
  width: 25%;
  height: 128px;
}

<div id="contentwraper">
  <div id="left"></div>
  <div id="middle">
    <div class="imagemiddle"></div>
    <div class="imagemiddle"></div>
    <div class="imagemiddle"></div>
    <div class="imagemiddle"></div>
  </div>
  <div id="right"></div>
</div>

Answer 1

Если вы хотите, чтобы правый столбец переполнялся справа от документа, когда страница слишком велика (или окно недостаточно), единственным решением является таблица.

В противном случае попробуйте следующее: 3 столбца, средний с гибкой шириной

Вы можете изменить поведение # right, перемещая его после или перед #left;или путем установки переполнения: скрыто на # middle.

http://jsfiddle.net/3UAbN/1/