Ребят, поможете с CSS?
Проблема вот чём.. в прикреплённом файле показан "макет" того, как всё это должно выглядеть. Что-то в роде небольшой формы. Если текст слишком длинный, то он должен переноситься на следующую строку, как это показано на картинке. Но есть одна проблема с позиционированием квадрата (square), он должен всегда находиться на одной и той же позиции относительно класса title. Текст может быть разной длинны и из-за этого класс square всё время сдвигается из стороны в сторону. Как можно его зафиксировать?

Вот код.


<div class="window">   
<div class="title">
   текст
   <span class="square">[ ]</span>
   </div>
</div>



.window {
   background-color: silver;
   box-shadow: 0.5em 0.5em 1em #000;
   max-width: 300px;
   min-width: 300px;
   width: 300px;
}

.title {
   border: 1px solid #555;
   text-align: center;
   font-size: 18px;
   background-color: #777;
   color: #ccc;
}

.square {
   display: inline-block;
   width: 12px;
   height: 19px;
   top: 1%;
   left: 30%;
   border: 1px solid #667;
   border-radius: 0px 0px 6px 6px;
   border-top: none;
   padding-right: 2px;
   padding-left: 2px;
   padding-bottom: 2px;
   background-color: #888;
   color: #eee;
}

Sceptic, спасибо!)) Только вот там небольшое неудобство есть.. когда текст достаточно длинный, то квадрат его перекрывает. Как можно это устранить? Чтобы текст был на расстоянии X пикселей от квадрата? Может это паддингом делать нужно?

Sceptic, не, не помогло.

Sceptic, тож не помогло..

Sandr, текст как я понимаю должен обтекать квадрат слева? вставь в титле два дива, к второму диву примени флоат ригхт и в него засунь квадрат