Q:

I am trying to make some divs responsive

I am trying to make some divs responsive.It's a joomla module actually. But it isn't responsive. My template is responsive. I put that module in a position but if resize the screen it gets bigger and it goes outside that position. 
I started with the first div (YJYC container) and I set the width to 100%. This is a good start, becouse I noticed that if I resize the screen, the result is "good". But I have to do this at the other divs, right?.
How should I continue?
Here is the html
<div id="YJYSC_container<?php echo $container_poz ?>" style="height:<?php echo $slider_height ?>px; width:<?php echo $slider_width ?>px;">
    <!-- navigator -->
    <div id="navigator_outer" style="height:<?php echo $slider_height ?>px; width:<?php echo  $thumb_width +30 ?>px;">
        <ul id="navigator">
            <?php foreach ($yousclides as $youscslide):?>
            <li class="element" style="height:<?php echo $slider_height / $visibleItems  ?>px">
                <div class="inner" style="width:<?php echo $thumb_width + 30 ?>px;height:<?php echo $slider_height / $visibleItems   ?>px">
                    <div class="inner_over" style="width:<?php echo $thumb_width +30 ?>px;height:<?php echo $slider_height / $visibleItems -12  ?>px">
                        <div class="border_out" style="height:<?php echo $slider_height / $visibleItems -20  ?>px;width:<?php echo $thumb_width + 0 ?>px;">
                            <div class="border_in" style="height:<?php echo $slider_height / $visibleItems -20  ?>px;width:<?php echo $thumb_width + 0 ?>px;">
                                <?php if($youscslide['img_url'] != "") echo $youscslide['img_tumb']; ?>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <?php endforeach;?>
        </ul>
    </div>
    <!-- end of navigator, start slides -->
    <div id="slides" style="height:<?php echo $slider_height ?>px; width:<?php echo $slider_width  ?>px;">
        <?php foreach ($yousclides as $youscslide):?>
        <div class="slide" style="height:<?php echo $slider_height ?>px; width:<?php echo $slider_width  ?>px;"> <a href="<?php echo $youscslide['link'] ?>" title="">
            <?php if($youscslide['img_url'] != "") echo $youscslide['img_out'] ?>
            </a>
            <div class="long_desc" style="width:<?php echo $intro_desc_width ?>;height:<?php echo $intro_desc_height ?>;<?php echo $intro_desc_pozi ?>">
                <h1><a href="<?php echo $youscslide['link'] ?>" title=""><?php echo  $youscslide['title'] ?></a></h1>
                <?php echo $youscslide['intro'] ?> <a href="<?php echo $youscslide['link'] ?>" title="" class="yousc_readon"><?php echo JText::_('YOUSC_READ') ?></a> </div>
        </div>
        <?php endforeach;?>
    </div>
</div>

A:

Use this:
@media screen and (max-width: 900px) {
    #YJYSC_container, #YJYSC_container_l {
        width: 100% !important;
        height: auto !important;
    }

    #YJYSC_container_l #navigator_outer {
          position: relative !important;
          width: 100% !important;
          height: auto !important;
          margin-bottom: 20px;
    }

    #YJYSC_container #slides, #YJYSC_container_l #slides {
          width: 100% !important;
    }

    #YJYSC_container #slides div.slide, #YJYSC_container_l #slides div.slide {
        width: 100% !important;
    }
    #YJYSC_container #navigator li.element div.inner, #YJYSC_container_l #navigator li.element div.inner,
    #YJYSC_container #navigator li.element div.inner_over, #YJYSC_container_l #navigator li.element div.inner_over,
    #YJYSC_container_l #navigator li.element div.inner div.inner_over .border_out,
    #YJYSC_container #navigator li.element div.inner div.inner_over .border_in, #YJYSC_container_l #navigator li.element div.inner div.inner_over .border_in,
    #YJYSC_container #navigator li.element div.inner div.inner_over .border_in, #YJYSC_container_l #navigator li.element div.inner div.inner_over .border_in img{
        width: 100% !important;
        height: auto !important;
        float: none !important;
    }

    #YJYSC_container #navigator li.element, #YJYSC_container_l #navigator li.element {
        float: left;
        width: 33% !important;
        height: auto !important;
        clear: none !important;
    }

    #YJYSC_container #navigator, #YJYSC_container_l #navigator {
        overflow: auto !important;
    }
}

This code triggers on devices with width under 900px. It still needs more work, but responsivity is starting to make sense.
Updated jsfiddle:
http://jsfiddle.net/gg9mvtrt/1/

