CODEWITHSUNDEEP
css
Sean Anderson
Sean Anderson

Reputation: 29291

Forcing parent to expand to hold child contents

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.

Upvotes: 1

Views: 150

Answers (2)

Yoshi
Yoshi

Reputation: 54649

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

Upvotes: 1

idrumgood
idrumgood

Reputation: 4924

if your parent container shrinks to less than 400px, it will break out an there's nothing you can do about it in this scenario. If you need a minimum width on your left column, you should probably set a minimum width on the parent.

Upvotes: 0

Related Questions