不同列之间的边界距离

Question

This is what i´m trying to achieve:

The problem I have is that on resize the blank space between the columns always change looking different on width and height from the others:

This is my markup:

<div id="wrapper">  
   <div id="header" class="clearfix"></div>
   <div class="layout clearfix"> 
   <div class="small_box top_left ">
    <img class="fittobox" src="img/home7.jpg" alt="home7" width="800" height="689">
   </div>
   <div class="small_box top_middle large_h">
    <img class="fittobox" src="img/home6.jpg" alt="home6" width="747" height="1330">
   </div>
   <div class="small_box top_right">
    <img class="fittobox" src="img/home5.jpg" alt="home5" width="503" height="460">
   </div>
   <div class="small_box bottom_left">
     <img class="fittobox" src="img/home2.jpg" alt="home2" width="830" height="800">
   </div>
   <div class="small_box bottom_right">
     <img class="fittobox" src="img/home7.jpg" alt="home7" width="800" height="689">
   </div>               
   </div><!-- Layout -->        
 </div><!-- wrapper -->

With this LESS:

    /*---- HOME - SHOP - TIENDAS LAYOUT ----*/
    .layout{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0px;
        bottom: 0px;
        z-index: 1;
        overflow: hidden;
        min-height: 100%;
        max-height: 100%;
        .fittobox{
            display: none;
        }
        .small_box{
            width: 33%;
            overflow: hidden;
            height: 45%;
            position: absolute;
            &.top_left{
                top: 3%;
            }
            &.top_middle{
                top: 3%;
                left: 50%;
                margin-left: -16%;
            }
            &.top_right{
                top: 3%;
                right: 0;
                margin-right: 0;
                width: 32%;
            }
            &.bottom_left{
                bottom: 40px;
                left: 0;
            }
            &.bottom_middle{
                bottom: 40px;
                left: 50%;
                margin-left: -16%;
            }
            &.bottom_right{
                bottom: 40px;
                right: 0;
                margin-right: 0;
                width: 32%;
            }
            &.large_h{
                top: 3%;
                height: 93%;
            }
            &.fullscreen{
                width: 100%;
                height: 100%;
            }
            &.halfscreen{
                width: 67%;
                height: 93%;
                top: 3%;
            }
    }

Answer 1

The standard box model places stuff like the borders, paddings and margins outside of the box.

This means that if you have a group of boxes with sizes in percentages that you want to add up to 100%, you can't have padding between them.

However you can change the box model so that the padding etc is inside the box, using CSS box-sizing:border-box; .

With this set, you can now specify your boxes so that they add up to 100%, but still give them padding and margin in pixels without messing up the layout.

Hope that helps.

Read more about box-sizing here: https://developer.mozilla.org/en-US/docs/CSS/box-sizing

Browser compatibility: Not supported in IE6 or IE7. Works fine in all other browsers. (polyfills for IE6/7 can be found here ).