#
January 13, 2013 at 10:42 pm
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:
