如何制作响应式div？

Question

I'm making an application using CSS and div in HTML, it's a restaurant menu, i have a wireframe that i must obey, so i'm using a pixel positioning inside the CSS not a percent ratio, so when opening the website in a maximized state is looks like:

But when minimizing it of curse it's sizes and positions don't response to that :

here is the fiddle

****The Code:**

*CSS:

    .buttonClass {
    width: 381px;
    height: auto;
    text-align: center;
    line-height: normal;
    border-radius: 7px;
    z-index: 3;
    background-image: -webkit-linear-gradient(top,#FFF 0%,#91BDD6 100%);
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%);
    background-image: -ms-linear-gradient(top,#FFF,#91BDD6);
    background-image: -o-linear-gradient(top,#FFF,#91BDD6);
    background-image: linear-gradient(top,#FFF,#91BDD6);
    border: solid #91BDD6 5px;
    box-shadow: 0px 0px 0px 5px #fff, 5px 3px 12px #000000;
    position: absolute;
    right:0;
    bottom:0;
}

.totalClass {
    width: 376px;
    height: 30px;
    padding: 10px 10px;
    text-align: center;
    line-height: normal;
    border-radius: 7px;
    z-index: 3;
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%);
    position: absolute;
    right: 0;
    top: 700px;
}

*div:

<div id="confirm" class="buttonClass">
  <div align="center">Confirm</div>
</div>    

<div id="total" class="totalClass">
  <div align="left"></div>
</div>      

Answer 1

The easiest way i can think of is: change the width:381px to max-width:381px and add a width:100%. In this way if there is enough place for the button it will be 381px wide and, if there is no place it will fit the given width.

The CSS code would be:

    .buttonClass {
    max-width: 381px;
    width:100%;
    height: auto;
    text-align: center;
    line-height: normal;
    border-radius: 7px;
    z-index: 3;
    background-image: -webkit-linear-gradient(top, #FFF 0%, #91BDD6 100%);
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%);
    background-image: -ms-linear-gradient(top, #FFF, #91BDD6);
    background-image: -o-linear-gradient(top, #FFF, #91BDD6);
    background-image: linear-gradient(top, #FFF, #91BDD6);
    border: solid #91BDD6 5px;
    box-shadow: 0px 0px 0px 5px #fff, 5px 3px 12px #000000;
    position: absolute;
    right:0;
    bottom:0;
}
.totalClass {
    width: 376px;
    height: 30px;
    padding: 10px 10px;
    text-align: center;
    line-height: normal;
    border-radius: 7px;
    z-index: 3;
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%);
    position: absolute;
    right: 0;
    top: 700px;
}

Answer 2

when you want to change a width or a height onclick="" then you might as well use javascript to change the dimensions. Javascript can also change the positions of objects - Look into it.

HTML

<div id="sidebar"></div>
<button onclick="hide_sidebar()" />

CSS

#sidebar {
width:200px;
height:100%;
float:right;
margin:0 0 0 0;
transition:0.25s
}

JS

function hide_sidebar() {
document.getElementById("sidebar").style.width="0";
}

Answer 3

Its not a big issue just give that div in pixel and put an ID for that button and give that button width 100%

ex:

button div id
{
width:20px;
height:20px;
}

#button
{
width:100%;
height:20px;
}

then continue enjoy your coding