I would change the way you are positioning #sidebar
and #wrap
to start with.
I would change the styles on #sidebar
to be:
#sidebar {
background-color: #FFFFFF;
float: left;
height: 100%;
left: 0;
min-height: 720px;
padding: 15px 30px 0;
position: fixed;
text-align: center;
width: 16%;
}
All I have done on this is removed the hard-coded width: 260px
to make the design a little bit easier to work with and removed the redundant left: 0
. If I was to continue refining the design I would change other declarations slightly but that is beyond the scope of the question.
Next, I would change the style of #wrap
to be:
#wrap {
float: right;
margin-right: 1%;
width: 78%;
}
And finally change the style of .box
to be:
.box {
display: inline-block;
float: left;
padding-bottom: 31%;
position: relative;
width: 25%;
}
Obviously you can play with the margins and widths to get the design looking exactly as you want but this should get you into a rough position.