re-size the width of div depending on browser's width

Question

I have a slideshow with pager and some buttons next to pager of slideshow (here is html page) which I am trying to make responsive.

The images I am fetching from database. So that are varying in number.

The problem is that pager/navigation of slideshow is fine for less number of images but becomes problematic for more images. Pager is overlapping the buttons which are next to it. as shown below:

For Desktop screen:

For small screen:

Below is the div structure

<div id="controls-wrapper" >
   <div id="controls">
         <div id="cycle-nav"><ul></ul></div> <!-- pager -->
   </div>
   <div class="button1" id="button1">
   <a href="#">button 1</a>
   </div>
   <div class="button2" id="button2">button 2</div>
   <div class="button3"><a href="#" target="_blank">button 3</a></div>
</div>

I am finding the solution other than media queries if possible. I tried by giving width in % to all div, by putting container div to above structure and giving it 100% width and height, by $(width).width() function. But not getting the solution.

jsfiddle

Is there any way to dynamically adjust the width of div depending on browser's screen size?

Answer 1

Here is simple solution using CSS and HTML, no @media queries no JavaScript, I just modified some lines of HTML and CSS to your code those are below.

HTML

<div id="controls-wrapper" >
            <div id="controls">
            <div id="cycle-nav"><ul></ul></div>
            </div>
            <div class="buton-controls">
                <div class="button1" id="button1">
                <a href="#">button 1</a>
                </div>
                <div class="button2" id="button2">button 2</div>
                <div class="button3"><a href="#" target="_blank">button 3</a></div>
            </div>
        </div> 

css

/* I wanted to center my loader */
            #cycle-loader {
                height:32px;
                left:50%;
                margin:-8px 0 0 -8px;
                position:absolute;
                top:50%;
                width:32px;
                z-index:999;
            }

            /*I want to avoid jumpiness as the JS loads, so I initially hide my cycle*/
            #maximage {
                display:none;/* Only use this if you fade it in again after the images load */
                position:fixed !important;
            }


        #arrow_left, #arrow_right {
                bottom:45%;
                height:67px;
                position:fixed;
                right:3%;

                width:36px;
                z-index:1000;
            }
            #arrow_left {
                left:3%;
            }

            #arrow_left:hover, #arrow_right:hover {
                bottom:45%;
            }
            #arrow_left:active, #arrow_right:active {
                bottom:45%;
            }
            a {color:#666;text-decoration:none;}
            a:hover {text-decoration:underline;}

            /*I want to style my pager*/
#cycle-nav {
    /*    float:left;*/
    margin-top: 8px;
    margin-left: 0;
    text-align: center;
}
#cycle-nav ul {
    list-style-type:none;
    width: 100%
}
#cycle-nav ul li {
/*    border:1px solid #FF8000;*/
    display: inline-block;
    margin:3px;
}

#cycle-nav ul li a {
  /*background: #057c96;*/
    background: #49BED8;

    float:left;
    height:10px;
    margin:2px;
    width:10px;


}


#cycle-nav ul li a:hover {
        background: #000;
        opacity:0.6;

}

#cycle-nav ul li.activeSlide {
   /* border:1px solid #000;*/
/*   background: #075262;*/
    }

#cycle-nav ul li.activeSlide > a {
    background: #075262;
}
#controls-wrapper { margin:0 auto; height:42px; width:100%; bottom:70px; z-index:4; background:url(../img/nav-bg.png) repeat-x; position:fixed; }

#controls { width: 50%; float: left; }
.buton-controls{
    width: 50%; 
    float: left;
    text-align: center;
}
.buton-controls > div{
    display: inline-block;
}
.button2{
    background-color: red;
    font: 14px/23px 'TitilliumText25L400wt',Arial,sans-serif;
    height: 20px;
    opacity: 0.4;
    text-align: center;
    width: 70px;
    color:#FFFFFF;
}

.button2:hover{
    background-color:#000;
    cursor:pointer;
    opacity:1 !important;
}

.button2hoverBg{
    background-color:#137087 !important;
    cursor:pointer;
    opacity:1;
}

.button3{
background-color: red;
    color:#FFFFFF;
    font: 14px/23px 'TitilliumText25L400wt',Arial,sans-serif;
    height: 20px;
    opacity: 0.4;
    position: relative;
    text-align: center;
    z-index: 10;
    width: 70px;\
}

.button3:hover, a:hover{
    background-color:#000;
    cursor:pointer;
    opacity:1 !important;
        text-decoration:none;
        color:#FFFFFF;
}

.button3 a{
    color:#FFFFFF;
   text-decoration:none;

}


.button1{
    background-color: red;
    color:#FFFFFF;
    font: 14px/23px 'TitilliumText25L600wt',Arial,sans-serif;
    height: 20px;
    text-align: center;
    width: 70px;
    z-index: 10;
    opacity: 0.4;
}

.button1 a{
    color:#FFFFFF;
   text-decoration:none;

}

Answer 2

Yes, use the vw and vh CSS properties.

1vw = 1% of window width, 1vh = 1% of window height.

http://demosthenes.info/blog/660/Using-vw-and-vh-Measurements-In-Modern-Site-Design

Answer 3

You can use the @media queries. Here's an example:

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background-color: lightblue;
            }

            @media screen and (max-width: 300px) {
                body {
                    background-color: lightgreen;
                }
            }
        </style>
     </head>
    <body>
     ...
</body>
</html>

This will change the background color of the body to lightblue. But when you resize your browser window to less than 300px it will change to lightgreen. I hope this will help you with your problem.