Hello friends,

When I zoom in (-) my web page ... some divs drop down and the page gets a messed look . their dimensions don't decrease relatively ... donno why ... I have cheeck other websites ... I zoom them to the very minimun and the divs keep fixed .

How can I fix this Thanks in advance.

This is my css code of the mentioned divs : .cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }

container {

    margin: 0 auto;
    padding: 0 2%;
    width:985px;
    }

content {

background: url(library/images/gray.png);
box-shadow: 0 0 5px #a9a9a9;
position: relative;

}

#main.col620 { 
  margin-top: -20px;
  width: 68.667%;
  margin-right: 0;
  margin-left:0;
  padding:0px;

}

  #featured {
  background: url(library/images/prev.png) repeat-x left bottom #fff;
  height: 460px;
  padding-bottom: 0 0 32px 0;
  overflow:hidden,

}

      #featured-latest.col480 {
        position: relative;
        height: 425px;
        margin-left: 0;
        margin-right:3px;
        width: 410px;
        overflow: hidden;
        padding:5px 0px 5px 5px;
        display: inline;

      }

      #featured-list.col480 { /* This divs drops down the left div : featured latest */
        position: relative;
        height: 425px;
        margin:0px;
        width: 34%;
        padding: 0 0 ;
        overflow: hidden;
        border: dashed 1px #7F8080;
        display: inline;
        float:right;

          }

  #section2 {
   position: relative;
   padding: 0 7px 0 7px;
   }

      #section2_left {
        float: left;
        width: 190px;
        border: 1px dashed #900;
        padding-bottom: 10px;
        overflow: hidden;
        position: relative;
        margin:0;
        padding: 0 5px 0 5px;
        text-align:center;
          }

      #section2_right {  /* This div within children drops down the previous div : section2_left */
        float:right;
        margin:0;
        padding:0;
        height: auto;

            }

          #right1 {
            width: 200px;
            height:300px;
            color: #ECE9D8;
            float:left;
            background-color: #999;
            position:relative;
            margin:0 15px 0 0;

          }

          #right2{
            width: 200px;
            height:300px;
            color: #ECE9D8;
            float:right;
            background-color: #999;
            margin:0;
            position:relative;

          }

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } .clearfix { display: block; }

This the related html code: