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;}

Andy Holmes · Accepted Answer · 2012-10-28 23:32:05Z

2

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

answered Oct 28, 2012 at 23:32

Andy Holmes

8,10711 gold badges56 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maxim VA · Accepted Answer · 2012-10-28 23:27:24Z

0

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..

answered Oct 28, 2012 at 23:27

Maxim VA

4081 gold badge6 silver badges19 bronze badges

Collectives™ on Stack Overflow

CSS Boxes - DIVS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related