Помогите с блочной вёрсткой

[buxtorus]

Привет. Верстаю блоками первый раз и столкнулся с проблемой. Может вы подскажете?
Как сделать так, чтобы текст не вылезал за пределы блока, а автоматически переносился на следующую строку?
Код Html

<div id="lsidebar">
                <div class="sticker">  
                  <div class="sb_top"></div>
                    <div class="sb_middle">
                      jghjghjghjghjghjghjghjghjhgjghjghjhgjghjhgj
                      ghjghjghj
                      ghjghjgh
                      jghjgh
                      jghjhgjhjghjghjghj
                      ghjhgjhjghj
                    </div>
                    <div class="sb_bottom"></div>  
                </div></div>

код css

.sb_top {background-image:url(sb_top.png); background-repeat:no-repeat; background-position:top; padding-left:10px; padding-right:10px; height:80px; }
.sb_middle {background-image:url(sb_middle.png); background-repeat:repeat-y; padding-left:10px; padding-right:10px; width:179px;}
.sb_bottom {background-image:url(sb_bottom.png); background-repeat:no-repeat; background-position:bottom; height:60px;}
#lsidebar { float:left; width:179px; background-image:url(07.png); background-repeat:no-repeat; background-position:top left;}

Скрин:

 

[cheg2]

Так сделай пробелы в этой длинной строчке - текст и перенесется

 

[ksido]

Как вариант, можешь поставить
owerflow: auto;

Тогда при появлении длинных строк будет появляться полоса прокрутки

Добавлено через 1 минуту
Так же поиграйся с
white-space:
и
word-wrap:

 

[buxtorus]

Так сделай пробелы в этой длинной строчке - текст и перенесется

Помогло, спасибо!

Как вариант, можешь поставить
owerflow: auto;

Тогда при появлении длинных строк будет появляться полоса прокрутки

Полосу прокрутки никак нельзя. Это ведь меню будет.

 

[buxtorus]

Ещё одна проблема

Возникла ещё одна проблема. Контент должен быть в рамке как на картинке.

Рамка состоит из девяти блоков:

Левый верхний угол (высота 20, ширина 23)
сама верхняя рамка (высота 20, ширина не ограничена)
правый верхний угол (высота 20, ширина 23)
левая рамка (ширина 23, по высоте должна тянуться, но не тянется, в этом и проблема)
блок с контентом (находится в самом центре, размеры не заданы)
Правая рамка (ширина 23, по высоте должна тянуться, но не тянется, в этом и проблема)
нижний левый угол (высота 20, ширина 23)
нижняя рамка (высота 20, ширина не ограничена)
нижний правый угол (высота 20, ширина 23)

Вот код с комментариями к каждому диву:

<div class="t_l2"></div> <!--верхний левый угол -->
<div class="t_r2"></div> <!--верхний правый угол -->
<div class="t_m2"></div> <!--верхняя рамка -->
                        
<div class="l_m"></div> <!--левая рамка -->
<div class="r_m"></div> <!--правая рамка -->
<div class="textblock">g hgh fg fgh fgh fgf hfghfgfgfg h fgh gg hfg hgf hfg h fgh gf h gfh g fh gf hfg h fgh gf hfg h gfh g hgf h gf h gfh g gfh fg hg f gfh gf hfg hg fh fgh gfh gf hgf hf hgf h fgh fg h fg hgf h gghfghfghgf h gfh fg h gfh gf hg fh gf hgf h gf hg fh g hfg h gf h gf h f g h fg h fg h fg h fghg fh f h fg h g fgh f g h f g h f g h gfhggh g hghg gh gh gh g ghhg gh ghh gh g hg fgh fghfghfh gf h fgh gf h fg hgf h gf h gf h fg hgfhfghfhfg hgf hf gh fg h fg hgfhg hfhfg h ggf h gffg h fghgh</div> <!--блок с контентом -->
                        
<div class="b_l2"></div> <!--нижний левый уголок/ -->
<div class="b_r2"></div> <!--нижний правый уголок -->
<div class="b_m2"></div> <!--нижняя рамка -->

Css:

.l_m {background-image:url(l_m.png); background-repeat:repeat-y; float:left; width:23px;}
.r_m {background-image:url(r_m.png); background-repeat:repeat-y; float:right; width:23px;}
.t_r2 {background-image:url(t_r2.png); background-repeat:no-repeat; height:20px; width:23px; float:right;}
.t_l2 {background-image:url(t_l2.png); background-repeat:no-repeat; height:20px; width:23px; float:left;}
.t_m2 {background-image:url(t_m2.png); background-repeat:repeat-x; height:20px; padding-left:23px;}
.b_l2 {background-image:url(b_l2.png); background-repeat:no-repeat; height: 20px; width:23px; float:left;}
.b_r2 {background-image:url(b_r2.png); background-repeat:no-repeat; height: 20px; width:23px; float:right;}
.b_m2 {background-image:url(b_m2.png); background-repeat:repeat-x; height: 20px; }
.textblock {padding-left:23px;}

И теперь суть вопроса. Как сделать так, чтобы левая и правая рамки тянулись по высоте на столько, сколько контента в среднем блоке.

Очень прошу, помогите:bc:

 

[lifediz]

.l_m {background-image:url(l_m.png); background-repeat:repeat-y; float:left; width:23px; height: auto;}
.r_m {background-image:url(r_m.png); background-repeat:repeat-y; float:right; width:23px; height: auto;}

или вместо авто 100%...

 

[buxtorus]

или вместо авто 100%...

Не помогает, к сожалению. Блок так и остаётся высотой в бэкграундовое изображение

 

[mydooms]

готовый рабочий пример:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

PS: давал уже его в соседней теме:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[Котяра]

Вот классная книга Блочная верстка Для просмотра ссылки Войди или Зарегистрируйся я по ней делал, очень полезн.

 

[капрал]

Возникла ещё одна проблема. Контент должен быть в рамке как на картинке.
Рамка состоит из девяти блоков

та ну ты прогоняешь реально. если не надо что б тянулся по ширине то примерно так:

div {width:100px; height:auto; background:url('block-bg.png') 0 0 repeat-y; position:relative}
div i, div b {display:block; width:100px; height:10px; position:absolute; left:0;}
div i {top:0; background:url('block-top.png') 0 0 no-repeat;}
div b {bottom:0; background:url('block-bottom.png') 0 0 no-repeat;}


<div>
текст
<i></i><b></b>
</div>