html - Ribbon navigation bar(Navbar) float position of flaps -

can suggest me how rid of space after ribbon navbar in following fiddle: http://jsfiddle.net/bc3fl/?

i know why created cant figure out how avoid except giving fixed negative margins elements below bar..

also, tried absolute position flaps wont work different browser's height width varies. , overflow:hidden container wont work too: http://jsfiddle.net/kbs42/ flaps must above navigation bar.

and basic code of fiddle be:

<div id="navigation_container"> <!-- left side of fork effect --> <div class="l-triangle-top"></div> <div class="l-triangle-bottom"></div> <!-- right side of fork effect --> <div class="r-triangle-top"></div> <div class="r-triangle-bottom"></div> <!-- ribbon body --> <div class="rectangle"> <!-- navigation links --> <ul id="navigation2">    <li><a href="index.html"> home</a></li>    <li><a href="intro.html"> about</a></li>    <li><a href="client.html"> clients</a></li>    <li><a href="catg.html"> products</a></li>    <li><a href="mailto:thakkar@pacmac.co.in"> contact</a></li> </ul> <!-- end ribbon body --> </div> </div> <!-- end container -->  <div style="clear:both;"></div> <div id="wrap"> <p>hey</p> </div>  </div> 

and css:

#navigation_container {  margin: 0 auto;  width: 1080px;  overflow:hidden;  height:80px;  padding: auto; } #navigation2 li {         list-style: none;         display: block;         float: left;   margin: 1em 0.8em; } #navigation2 li {         text-shadow: 0 2px 1px rgba(0,0,0,0.5);         display: block;         text-decoration: none;         color: #f0f0f0;         font-size: 1.6em;         margin: 0;         line-height: 28px; } #navigation2 li.active a:hover, #navigation2 li a:hover {         margin-top: 2px; }  #navigation2 li.active {         font-style: italic; } #navigation2 li.active { } .rectangle {    background: #e5592e;    height: 62px;    width:920px;    margin: 0 auto;    position: relative;    -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);    -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);    box-shadow: 0px 0px 4px rgba(0,0,0,0.55);     -webkit-border-radius: 2px;     -moz-border-radius: 2px;  border-radius: 2px;     z-index: 500; /* stack order: foreground */ } .l-triangle-top {     border-color: #d9542b transparent transparent;     border-style: solid;     border-width: 50px;     float: left;     height: 0;     left: 30px;     position: relative;     top: 10px;     width: 0; }  .l-triangle-bottom {     border-color: transparent transparent #d9542b;     border-style: solid;     border-width: 50px;     float: left;     height: 0;     left: -68px;     position: relative;     top: -35px;     width: 0; } .r-triangle-top {     border-color: #d9542b transparent transparent;     border-style: solid;     border-width: 50px;     float: right;     height: 0;     position: relative;     right: 30px;     top: 10px;     width: 0; } .r-triangle-bottom {     border-color: transparent transparent #d9542b;     border-style: solid;     border-width: 50px;     float: right;     height: 0;     position: relative;     right: -68px;     top: -35px;     width: 0; } </style> 

thanks lot. suggestions/critique welcome.

i give container element relative position, set triangle pieces absolute positioning.

#navigation_container {     position: relative; } .l-triangle-top {     position: absolute;     left: -50px;     top: -5px; } .l-triangle-bottom: {     position: absolute;     left: -50px;     top: -45px; } .r-triangle-top {     position: absolute;     right: -50px;     top: -5px; } .r-triangle-bottom: {     position: absolute;     right: -50px;     top: -45px; } 

that stop triangle elements taking space , pushing content down.