Css фон / проблема положения фона

Question

У меня проблема с "позицией" некоторого кода:

Может ли кто-нибудь помочь мне найти правильное решение для отображения графики справа и слева и «контента» посередине без «белого переполнения»?

Снимок экрана: http://i.stack.imgur.com/1qfeb.jpg

Источник из 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>

Источник из 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-align:left;color:#000000;vertical-align:top}

Answer 1

# обертка {margin: 0 auto;ширина: 922 пикселей;}

# leftcolumn {display: inline;цвет: # 333;поле: 10px;отступы: 0px;ширина: 195 пикселей;плыть налево;}

# content {float: left;цвет: # 333;поле: 10px 13px;отступы: 0px;ширина: 460 пикселей;дисплей: встроенный;положение: относительное;}

# rightcolumn {display: inline;положение: относительное;цвет: # 333;поле: 10px 10px 10px 0px;отступы: 0px;ширина: 195 пикселей;плавать: правильно;}

А HTML-код для этого css подобен

    <div id="wrapper">

        <div id="leftcolumn">



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

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



        </div>
    </div>

</body>

В этом случае лучше всего обернуть все ваши подчиненные DIV в одну внешнюю DIV-подобную оболочку DIV.

Answer 2

У меня есть решение - для заинтересованных людей здесь:

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

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

Answer 3

Вы пытались установить прозрачный цвет фона, чтобы контейнеры не наследовали белый фон от другого правила ...

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