CSS Help plz

Been doing some college **** thats due in for tomorrow, and IM STUCK

I show u screenshots.

I dont give a **** if the CSS/HTML is not "GOOD", I just want this **** to work so I can get to bed.

Show Hide

http://i39.tinypic.com/2yv1ef8.png

The CSS code and HTML code for that section is below:

Code:

---

    #content
    {
        margin: 0 auto;
    }
   
    #content #content-holder
    {
   
    }
   
    #top
    {
        width: 100%;
        height: 10px;
    }
   
    #top #top-left-corner
    {
        min-width: 10px; height: 10px;
        background: url( 'images/content_box_left_top_corner.jpg' );
       
        float: left;
    }
   
    #top #top-middle
    {
        width: 100%; height: 10px;
        background: url( 'images/content_box_top.jpg' );
   
    }
   
    #top #top-right-corner
    {
        min-width: 10px; height: 10px;
        background: url( 'images/content_box_right_top_corner.jpg' );
       
        float: right;
    }
   
    #bottom
    {
        width: 100%;
        height: 10px;
    }
   
    #bottom #bottom-left-corner
    {
        min-width: 10px; height: 10px;
        background: url( 'images/content_box_left_bottom_corner.jpg' );
       
        float: left;
    }
   
    #bottom #bottom-middle
    {
        width: 100%; height: 10px;
        background: url( 'images/content_box_bottom.jpg' );
   
    }
   
    #bottom #bottom-right-corner
    {
        min-width: 10px; height: 10px;
        background: url( 'images/content_box_right_bottom_corner.jpg' );
       
        float: right;
    }

    #middle
    {
        width: 100%;
        height: 100%;
    }
   
    #middle #middle-left-side
    {
        width: 10px; min-height: 10px;
       
        background: url( 'images/content_box_left.jpg' );
        background-repeat: repeat-y;
       
        float: left;
    }
   
    #middle #middle-middle
    {
        width: 100%;
        background-color: white;
       
        height: 100%;
       
       
    }
   
    #middle #middle-right-side
    {
        width: 10px; min-height: 10px;
       
        background: url( 'images/content_box_right.jpg' );
        background-repeat: repeat-y;
       
        float: right;
    }

---

HTML Code:

---

    <div id="content">
        <div id="content-holder">
            <div id="top">
                <div id="top-left-corner"></div>
                <div id="top-right-corner"></div>
                <div id="top-middle"></div>
            </div>
           
            <div id="middle">
                <div id="middle-left-side"></div>
                <div id="middle-right-side"></div>
                <div id="middle-middle">
                   
                    omg

               
                </div>

            </div>
           
            <div id="bottom">
                <div id="bottom-left-corner"></div>
                <div id="bottom-right-corner"></div>
                <div id="bottom-middle"></div>
            </div>
        </div>
    </div>

---

So please, help and in return lovely reputation.

Remove the

Code:

---

width: 100%;

---

from #middle-middle as by default a div is a block level element and will take up all width possible, but by setting it to 100% (of it's parent) + 20 px for each of the left and right, it'll overflow, I believe that is correct. Also you don't need to do #middle #middle-middle, they're id's, you don't need to access them via the decendant selector just "#middle-middle" is fine.