0

Hello I have two boxes inside one container. Now the boxes are in the same ratio to each other:

<div class="container" width>
  <div style="width=80%">box 1
    <div>
      <div style="width=20%">Box 2
      </div>
    </div>
  </div>
</div>

What I want to do now is give Box 2 the constant width of 200px. But Box 2 should always fill exactly the rest of the container. I hope you understand what I mean. Is this possible?

captainsac
  • 2,484
  • 3
  • 27
  • 48
fala
  • 271
  • 3
  • 14

2 Answers2

1

Here a basic two colums code :

<style>
#wrapper {
  margin-right: 200px;
}
#content {
  float: left;
  width: 100%;
  background-color: #CCF;
}
#sidebar {
  float: right;
  width: 200px;
  margin-right: -200px;
  background-color: #FFA;
}
#cleared {
  clear: both;
}
</style>

<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>
cyberviking
  • 48
  • 6
0

Do you mean like minimum width ? you can do it like that : 

#box2 {
 width: 20%;
 min-width: 200px;
}
Iatrarchy
  • 349
  • 3
  • 12
  • No, actually it should be like in this thread http://stackoverflow.com/questions/2023512/how-can-i-make-a-div-take-up-the-rest-of-the-height-of-a-container-div But not with the rest height, instead with the rest width. – fala Jun 09 '15 at 07:53