Trouble with Div Overflows - css

Question

I'm in a bit of an overflow conundrum right now.
I have a layout that is supposed to have a white container with rounded corners. The footer (which is at the bottom of the container, and inside of it) is a shade of grey. I used 'overflow-x:hidden' to make sure the bottom corners of the footer div were rounded with the container.
The problem is, when I hide the overflow, the css ribbon (that I'm using in the header) folds are hidden.
I'm trying to figure out a way to rearrange the DIVs to achieve a layout that has the rounded corners and the ribbon at the top, but am having trouble.
I am using WordPress along with Bootstrap to code my layout. Here's my code as it stands (without the hidden overflow).
CSS:
.container {
clear: both;
margin: 20px auto;
width: 940px;
background: #fff;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
/* overflow-x: hidden; */
*zoom: 1;
}
/* Ribbon
-------------------------------------------------*/
.rectangle {
background: #80D4F6;
height: 50px;
width: 970px;
position: relative;
left:-15px;
top: 30px;
float: left;
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.35);
-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.35);
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.35);
z-index: 100; /* the stack order: foreground */
margin: -30px 0px 0px;
}
.rectangle h2 {
font-size: 40px;
font-family: 'Grand Hotel', cursive, Georgia, helvatica;
color: #fff;
padding-top: 6px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
text-align: center;
}
.rectangle h2 a{
color: #FFFFFF;
}
.triangle-l {
border-color: transparent #7d90a3 transparent transparent;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position: relative;
left: -30px;
top: 35px;
z-index: -1; /* displayed under bubble */
}
.triangle-r {
border-color: transparent transparent transparent #7d90a3;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position: relative;
left: 940px;
top: 5px;
z-index: -1; /* displayed under bubble */
}
/* Footer
-------------------------------------------------*/
.site-footer{
padding-top: 10px;
background: #f6f6f6;
}
And here is how the HTML is formatted:
<div class="container">
<div class="row">
<div class="span12">
NAV
<div class="rectangle"><h2>SITE TITLE</h2></div>
<div class="triangle-l"></div> <!-- Left triangle -->
<div class="triangle-r"></div> <!-- Right triangle -->
SLIDESHOW
</div>
</div>
<div class="row">
<div class="span8">
CONTENT
</div>
<div class="span4">
SIDEBAR
</div>
</div>
<footer class="site-footer" role="contentinfo">
<div class="row">
FOOTER
</div>
</div>
</div>
The issue can be seen here(the footer's corners aren't rounded because I "unhid" the overflow to allow the ribbon folds to show).
Any help would be greatly appreciated.

Answer 1

add this css in you style.css file
.site-footer {
border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
-moz-border-radius:0 0 10px 10px;
}