Question

http://jsfiddle.net/w9E4K/7/

<div id="parent">
<div id="left">Left</div>
<div id="right">Right</div>
</div>​

#left {
    display: inline-block;
    width: 75%;
    background-color: blue;
}

#right {
    display: inline-block;
    width: 25%;
    min-width: 100px;
    background-color: red;
}

#parent {
    overflow: auto;
}

​
I have two divs which I am trying to layout such that one is 3/4 of the screen and the other is 1/4. However, if the screen gets too small, I need to setup min-widths to prevent elements from shifting.

I’m wondering how to express this with CSS? The idea would be that the right-side div demands at least 100px and causes the parent div to widen to hold it.

I can swap to using floats instead of inline-blocks if this is helpful.

Answer 1

#left {
  overflow: hidden;
  background-color: blue;
}

#right {
  float: right;
  width: 25%;
  min-width: 100px;
  background-color: red;
  margin-top: 5px; // only used to see the left div
                   // actually ending next to the right div
}

with:

<div id="parent">
  <div id="right">Right</div>
  <div id="left">Left</div>
</div>

demo: http://jsbin.com/akamik/1/