Когда я уменьшаю сеть 4 div, переходите к следующей строке

Question

любая идея, почему, когда я уменьшаю размер сайта, 4div всегда идет вниз к следующей строке. Демонстрация: http://autovin.org/tp/

/* Reset All Styles */ 
* {padding:0px; margin:0px;font-family:Segoe UI;} 
/* Background */ 
body {background:url(images/grids.gif) white;} 
/* Wrapper */ 
.wrapper {width:998px;margin:0 auto;} 
/* Header */ 
.header {padding:20px 0 20px 0;} 
/* Navigation */ 
.nav {background:#82b2c9;color:white;} 
/* Content */ 
.content {padding:10px 0;overflow:hidden;} 
/* Box */ 
.box {width:240px; margin:0 10px 10px 0;border:1px solid black;float:left;} 
.box:nth-child(4n){margin:0;} 
/* Pagination */ 
.pagination {clear:both;} 
/* Footer */ 
.footer {background:#82b2c9;color:white;} 

Answer 1

я бы просто использовать проценты и EM единиц вместо пикселей, потому что браузеры гораздо более совместимы с ними. Но в вашем случае, я не вижу, чтобы люди все так же менялись. Вы хотите быстро исправить, но я предлагаю переосмыслить это с самого начала. Читайте о размерах ящиков и процентах. Размер коробки очень велик. Удачи!

http://jsfiddle.net/sheriffderek/xr6nC/

HTML

<ul> 
     <li><a href="#">Your block of text</a></li> 
     <li><a href="#">Your block of text</a></li> 
     <li><a href="#">Your block of text</a></li> 
     <li><a href="#">Your block of text</a></li> 
     <li><a href="#">Your block of text</a></li> 
     <!-- etc. --> 
    </ul> 

</div> 

CSS

.container { 
    width: 100%; 
    max-width: 40em; /* whatever you want */ 
    border: 1px solid red; 
    overflow: hidden; 
} 

.container ul { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
} 

.container a { 
    width: 22%; /* this isn't perfect - but it would be 23.5% - if you were to use box-sizing: border-box; */ 
    /* which I highly recomend you make part of your workflow in every project */ 
    float: left; 
    border: 1px solid black; 
    min-height: 5em; 
    margin-right: 2%; 
    margin-bottom: 2%; 
} 

.container li a:nth-of-type(4n+4) { 
    margin-right: 0;  
}