CSS Boxes - DIVS

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

Answer 2

I think it has something to do with the margin-right of 80px you are applying: #box{margin-right:80px;}​

in total i have 780px for 3 boxes + 240px for all the margin rights so that makes 1020px, a but too much for a 960 grid i think..