Plot packaging of floating div vertically


  • QA Engineer

    The normal div floating shall be built in with the height of the highest element. There you go. Обычное поведение "плавающих" блоков

    Google+'s making the plugs more compact and beautiful. There you go. Компактная вёрстка Google+

    How can the blocks be lifted up tighter than filling space? Preferably, without dynamic reading of the boundaries of each element and absolute positioning.



  • It's worth thinking either of the same size of the blocks in height or of breaking into a few columns and filling them with blocks, but one to the left, the other to the right... Probably in three columns on the 2nd squeak. ♪ ♪ It's also possible to use the Margin Collaps properties and put down the bottom of the blocks... (but it's at a small distance of height.) ♪ ♪ )

    About the poles version:

    #wrapper{
     width:770px;
     outline:1px solid #9F00BF;
    }
    #cols1{
     width:250px;
     float:left;
     margin:0;
    }
    #cols2{
     width:250px;
     margin: 5px  260px;
    }
    #cols3{
     width:250px;
     float:right;
     margin:0;
    }
    

    .a4{
    width:245px;
    height:150px;
    background:#66f;
    margin:5px;
    }
    .a5{
    width:245px;
    height:100px;
    background:#66f;
    margin:5px;
    }
    .a6{
    width:245px;
    height:150px;
    background:#66f;
    margin:5px;
    }
    .a7{
    width:245px;
    height:125px;
    background:#66f;
    margin:5px;
    }

    <div id="wrapper">
    <div id="cols1">
    <div class="a4"></div>
    <div class="a6"></div>
    <div class="a5"></div>
    <div class="a7"></div>
    </div>
    <div id="cols3">
    <div class="a5"></div>
    <div class="a4"></div>
    <div class="a6"></div>
    <div class="a7"></div>
    </div>
    <div id="cols2">
    <div class="a4"></div>
    <div class="a7"></div>
    <div class="a6"></div>
    <div class="a5"></div>
    </div>
    </div>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2