Css background/background-position problem

i have a problem with "position" of some code:

can anyone help me to find a correct solution to show the graphics at the right and left side and the "content" in the middle without the "white overflow"?

Screenshot: http://i.stack.imgur.com/1qfeb.jpg

Source from file.html

<div id="toggler-1">
 <div class="box-2">
  <div class="left left-img">
  </div>
 <div class="left content">
  <p>simple text example ...</p>
 </div>
 <div class="right right-img">
 </div>
 <div class="clear">
 </div>
</div>
</div>

Source from CSS:

.content .main .box .box-2{height:100%;width:100%;background:#FFF}
.content .main .box .box-2 .left-img{background:url("../images/content-box-left-left.gif");background-repeat:repeat-y;width:14px;height:100%}
.content .main .box .box-2 .right-img{background:url("../images/content-box-right-right.gif");background-repeat:repeat-y;width:14px;height:100%}
.content .main .box .box-2 .content{text-ali开发者_运维问答gn:left;color:#000000;vertical-align:top}

#wrapper { margin: 0 auto; width: 922px; }

#leftcolumn { display: inline; color: #333; margin: 10px; padding: 0px; width: 195px; float: left; }

#content { float: left; color: #333; margin: 10px 13px; padding: 0px; width: 460px; display: inline; position: relative; }

#rightcolumn { display: inline; position: relative; color: #333; margin: 10px 10px 10px 0px; padding: 0px; width: 195px; float: right; }

And the HTML for this css is like

    <div id="wrapper">

        <div id="leftcolumn">



        </div>
        <div id="content">

        </div>
        <div id="rightcolumn">



        </div>
    </div>

</body>

It is best practice to wrap your all sub DIV into one outer DIV like wrapper DIV in this case.

Have you tried setting the background colour to transparent, to ensure that the containers aren't inheriting a white background from another rule...

.content .main .box .box-2{
    height:100%;
    width:100%;
    background:#FFF;
}

.content .main .box .box-2 .left-img{
    background-color: transparent;
    background:url("../images/content-box-left-left.gif");
    background-repeat:repeat-y;
    width:14px;
    height:100%;
}

.content .main .box .box-2 .right-img{
    background-color: transparent;
    background:url("../images/content-box-right-right.gif");
    background-repeat:repeat-y;
    width:14px;
    height:100%;
}

.content .main .box .box-2 .content{
    text-align:left;
    color:#000000;
    vertical-align:top;
}

i have a solution - for interested people here:

<div id="toggler-1">
 <div class="lo">
  <div class="ro"> 
   <div class="inhalt"> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
   </div>
  </div>
 </div>
</div>

and the css:

.content .main .box .ro {background:url(../images/content-box-right-right.gif) top right repeat-y;}
.content .main .box .lo {background:url(../images/content-box-left-left.gif) top left repeat-y;}
.content .main .box .inhalt {margin:0;padding:2.5em 2.5em 3.5em 2.5em;}
.content .main .box .inhalt p {margin:0;padding:0;}