Grow your CSS skills. Land your dream job.

help : some right divs drop down the left ones

  • # 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:



    # January 13, 2013 at 10:44 pm




    # January 13, 2013 at 10:44 pm




    # January 13, 2013 at 10:51 pm

    sorry
    I donno what’s wrong the code can’t be posted properly

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".