Question

I have put the following code here

I am having issues with my boxes and they are displaying how they are on the jsfiddle but there is room for another 2 on the top row within my 960 grid.

Why is it pushing it onto two lines?

HTML:

        <div id="holder">
            <div id="box" class="box">
                <p>Text</p>
                </div>
                <div id="box" class="box">
                    <p>Text</p>
                    </div>
                    <div id="box" class="box">
                        <p>Text</p>
                        </div>
                        <div id="box" class="box">
                            <p>Text</p>
                            </div>
                            <div id="box" class="box">
                                <p>Text</p>
                                </div>
                                <div id="box" class="box">
                                    <p>Text</p>
                                    </div>
            </div><!-- Holder End -->

CSS:

#holder{width:100%;height:600px;}    
.box{width:260px;min-height:350px;float:left; border:1px solid red;}
    #box{margin-right:80px;}​

Answer 1

Your margin-right: 80px; is adding an extra 80px width to each element, therefore you are most likely running out of room there. Try removing the 80px of the right margin, and seeing if it fits okay. From there, adjust the margin to fit everything in the right place. Perhaps maybe 60px. That should work