Can't get the CSS nth term to work - html

Question

I realise i have posted couple of questions on floating , nearly near just have one more question on the nth term..
I am trying to adjust some responsive floats using the nth term and widths but im struggling to change the following.
When you reduce the screen size to under 600px i need the two boxes to be displayed as 3 equally boxes, not two. I am struggling to accomplish this using widths and use of nth term.
Im trying to achieve the following.
4 boxes above 900px +px
3 boxes above 600px - 900px
2 boxes 460px - 600px
1 box 0- 460px
If anyone could help it would be great.
http://jsfiddle.net/sFApC/
.display-box{
position: relative;
clear: left;
background: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.09);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.09);
box-shadow: 0 1px 2px rgba(0,0,0,0.09);
padding: 10px 10px 30px 10px;
border: 1px solid #d1d1d1;
}
.display-box:hover{
-webkit-box-shadow: 0 10px 6px -6px #b5b5b5;
-moz-box-shadow: 0 10px 6px -6px #b5b5b5;
box-shadow: -1px 1px 11px 2px #b5b5b5;
cursor: pointer;
border: 1px solid #c6c6c6 ;
}
.display-user{
max-width: 20px !important;
margin-bottom: 10px;
float: left;
}
.user-name{
float: left;
font-weight: bold;
margin: 6px 0 0 6px;
}
.content-upload img{
height: 20%;
}
#upload-container {
width: 100%;
max-width: 970px;
margin: 0 auto;
margin-top: 20px;
}
#upload-container ul {
width: 100%;
*zoom: 1;
}
#upload-container ul li {
float: left;
margin-right: -100%;
width: 93%;
}
#upload-container ul li a:hover {
text-decoration: none;
}
#upload-container ul li span {
font-size: 16px;
line-height: 22px;
display: block;
padding-bottom: 30px;
}
#upload-container ul li img {
width: 100%;
}
#upload-container ul li:nth-child(1n+1) {
margin-left: 0%;
margin-bottom: 5.85%;
clear: both;
overflow: hidden;
*zoom: 1;
}
#media screen and (min-width: 460px) {
#upload-container ul li {
float: left;
margin-right: -100%;
width: 42.08%;
}
#upload-container ul li span {
padding-bottom: 10px;
}
#upload-container ul li:nth-child(2n+1) {
margin-left: 0%;
margin-bottom: 3.85%;
clear: both;
overflow: hidden;
*zoom: 1;
}
#upload-container ul li:nth-child(2n+2) {
margin-left: 51.93%;
margin-bottom: 3.85%;
clear: none;
}
}
#media screen and (min-width: 600px) {
#upload-container ul li {
float: left;
margin-right: -100%;
width: 45.08%;
}
#upload-container ul li span {
padding-bottom: 10px;
}
#upload-container ul li:nth-child(2n+1) {
margin-left: 0%;
margin-bottom: 3.85%;
clear: both;
overflow: hidden;
*zoom: 1;
}
#upload-container ul li:nth-child(2n+2) {
margin-left: 51.93%;
margin-bottom: 3.85%;
clear: none;
}
}
#media screen and (min-width: 900px) {
#upload-container ul li {
float: left;
margin-right: -100%;
width: 20.8%;
}
#upload-container ul li span {
padding-bottom: 0px;
}
#upload-container ul li:nth-child(4n+1) {
margin-left: 0%;
margin-bottom: 3.85%;
clear: both;
overflow: hidden;
*zoom: 1;
}
#upload-container ul li:nth-child(4n+2) {
margin-left: 25.96%;
margin-bottom: 3.85%;
clear: none;
}
#upload-container ul li:nth-child(4n+3) {
margin-left: 51.93%;
margin-bottom: 3.85%;
clear: none;
}
#upload-container ul li:nth-child(4n+4) {
margin-left: 77.89%;
margin-bottom: 3.85%;
clear: none;
}
}

Answer 1

In #media screen and (min-width: 600px) query you have only 2 columns specified.
Quick fix:
#media screen and (min-width: 600px) {
#upload-container ul li {
float: left;
margin-right: -100%;
width: 27.73%;
}
#upload-container ul li span {
padding-bottom: 10px;
}
#upload-container ul li:nth-child(3n+1) {
margin-left: 0%;
margin-bottom: 3.85%;
clear: both;
overflow: hidden;
*zoom: 1;
}
#upload-container ul li:nth-child(3n+2) {
margin-left: 34.29%;
margin-bottom: 3.85%;
clear: none;
}
#upload-container ul li:nth-child(3n+3) {
margin-left: 68.59%;
margin-bottom: 3.85%;
clear: none;
}
}
This is not pixel-perfect, but you can see 3 columns. You must just adjust margins and widths.
Working sample: http://jsfiddle.net/Ls8c6/1/

Answer 2

Your css is incorrect, you are using the same thing for media screen with min-width:460 and media screen with min-width: 600.
Try to change your code, use this snippet for media screen and min-width of 600px:
#media screen and (min-width: 600px) {
#upload-container ul li {
float: left;
margin-right: -100%;
width: 25.8%;
background-color: green;
}
#upload-container ul li span {
padding-bottom: 0px;
}
#upload-container ul li:nth-child(3n+1) {
margin-left: 0%;
margin-bottom: 3.85%;
clear: both;
overflow: hidden;
*zoom: 1;
}
#upload-container ul li:nth-child(3n+2) {
margin-left: 30.96%;
margin-bottom: 3.85%;
clear: none;
}
#upload-container ul li:nth-child(3n+3) {
margin-left: 61.93%;
margin-bottom: 3.85%;
clear: none;
}
}

Answer 3

I would rather skip the #media queries and just use float: left on .display-box. Together with a width: 200px, you would get roughly the expected behaviour.
.display-box {
float: left;
width: 200px;
}
This would need some margin and padding adjustments, of course. See modified JSFiddle
If you want exactly the given columns, I would still use float: left, but simplify the media queries to just give a relative width for .display-box and refactor the rest into the common CSS rules
.display-box {
float: left;
min-width: 200px;
width: 80%;
}
#media screen and (min-width: 460px) {
.display-box {
width: 40%;
}
}
#media screen and (min-width: 600px) {
.display-box {
width: 25%;
}
}
#media screen and (min-width: 900px) {
.display-box {
width: 17%;
}
}
JSFiddle