Progressive Enhancement inside div

Question

Anyone know of a way to target a div that will hide/show content based on the size of the div similar to the way media tags work.

Example

<div class="wrapper">

  <div class="holder">
    <div class="nav visible-nav"></div>
    <div class="content"></div>
  </div>

  <div class="holder">
    <div class="nav visible-nav"></div>
    <div class="content"></div>
  </div>
</div>

.wrapper{width:100%;}
.holder{width:50%;float:left;}
.holder{width:50%;float:right;}

Using a media tag i can target it like so:

    @media only screen and (max-width:1200px){ 
        .visible-nav{
            display:none;
        }
    }

Any way I can target the div instead of the entire screen??

Answer 1

A not elegant but possible solution would be to use the same code you used, but calculate on what screen width the .holder divs will be small enough to hide the .visible-nav divs:

for example, if i wanted to hide them when .holder is narrower than 400px, since .holder is 50%:

@media only screen and (max-width:800px){ 
    .visible-nav{
        display:none;
    }
}

Another way which is not pure CSS would be to use JS or jQuery to apply the conditions.