Question: I have a div. Inside this div are 2 smaller divs. I want one of the smaller divs to have `overflow:visible`, and the other to have `overflow:hidden`. Can't figure out what selectors allow me to do this, I think I'm missing something super simple.

**edit** Sorry, let me rephrase that: I want the main div to have the style `overflow:visible` only applied to one of the child divs, while the main div also has the style `overflow:hidden` apply to the other. 

Example: 

<http://jsfiddle.net/3fQBt/>

```
<div id="body">
  <div id="visible">This div should be visible.</div>
  <div id="hidden">This div should be hidden.</div>
</div>

#body{
  width:300px;
  height:300px;
  margin:20px;
  position:relative;
  float:left;
  overflow:visible;
}

#visible{
  width:100%;
  height:100px;
  margin-left:-20px; //this should overflow visibly
  position:relative;
  float:left;
}

#hidden{
  width:100%;
  height:100px;
  margin-left:-20px; //this should be hidden
  position:relative;
  float:left;
}

```

Answer: 
something like this should get you going in the right direction.

```
<div id="body">
 <div id="visible">This div should overflow.</div>
 <div id="hidden-box">
  <div id="hidden">This div shouldn't.</div>
 </div>
</div>

#hidden-box {position:relative;overflow:hidden;height:100%;width:100%;}

```
TRY this,

```
#hidden {
        width: 100%;
        height: 100px;
        background-color: #00F;
        color: #FFF;
        /*margin-left: -20px;  <--- remove this*/
        position: relative;
        float: left;
        overflow: hidden !important;/*add this*/
    }

```