CSS Help plz

[Protege]

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.

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

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



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



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

[Iszak]

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