Question

I would like to have like a three columns page where the one in the middle has a dynamic width (window resize) AND a minimum one (div #middle: min-width:400px;).

Problem is that the third column is wrapping when I resize.

I know if I replace the #middle div width:75%; by width:500px; this would work and the right column won’t wrap, but I won’t have a dynamic width middle column anymore…

How an I solve this?

#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

If you want the right column to overflow on the right of the document when the page is too large (or the window not enough), the only solution is a table.

Else, try this: 3 columns, middle one with flexible width

You can change #right’s behavior by moving it after or before #left; or by setting overflow:hidden on #middle.

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