Использовал разные свойства вроде float и display:block но не помогает.В общем ситуация следующая:Есть новость,фоны для заголовка и текста заданы в ячейках таблиц(это нужно,чтобы при увеличении кол-ва текста средний фон растягивался(если у кого-то есть альтернативный вариант пишите)) и еще 1 ячейка в таблицы для нижней части фона и мне нужно,чтобы эти блоки отталкивали футер.Точно такая же фигня со спанами в общем прикладываю код. Хтмл пример со спанами <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/styles.css"> <title>B?rnud?rzs R?GELE</title> </head> <div id="wrapper"> <div id="header"> <div id="top_line"> <ul> <li class="left"><a href="#">Главная</a></li> <li class="normal"><a href="#">О нас</a></li> <li class="normal"><a href="#">Детский сад</a></li> <li class="normal"><a href="#">Студии и курсы</a></li> <li class="normal"><a href="#">Летний отдых</a></li> <li class="right"><a href="#">Монтессори</a></li> </ul> </div> <div id="logo"> <div id="nadpis"><img src="img/logo_nadpis.png" width="403" height="78"></div> <div id="photo_1"><img src="img/logo_photo1.png" width="245" height="190"></div> <div id="photo_2"><img src="img/logo_photo2.png" width="245" height="189"></div> <div id="photo_3"><img src="img/logo_photo3.png" width="250" height="188"></div> </div> </div> <div id="content"> <span id="content_title">Новости</span> <span id="content_title">Новости</span> <span id="content_title">Новости</span> <span id="content_title">Новости</span> <span id="content_title">Новости</span> <span id="content_title">Новости</span> <span id="content_title">Новости</span> <span id="content_title">Новости</span> <span id="content_title">Новости</span> <span id="content_title">Новости</span> <span id="content_title">Новости</span> <!--<table class="news"> <tr> <td background="img/news_head.png" width="400" height"40" class="news_header"><span> </span><span class="news_title">16 октября 2012 года в 17:30</span></td> </tr> <tr> <td background="img/news_center.png" width="400" height"1" class="news_center"> <p>Состоится собрание для родителей детей от 0</p> <p>до 3 лет, которые планируют посещать</p> <p>студию "Вместе с мамой" (новая группа) и ещё</p> <p>не был на собрании.</p></td> </tr> <tr> <td background="img/news_footer.png" width="400" height"10" class="news_footer"> </td> </tr> </table>--> <!--<table class="news"> <tr> <td background="img/news_head.png" width="400" height"40" class="news_header"><span> </span><span class="news_title"><b>Нам исполняется 20 лет!</b></span></td> </tr> <tr> <td background="img/news_center.png" width="400" height"1" class="news_center"> <p>Наш центр начал свою работу 1 сентября 1992</p> <p>года.За эти годы мы вырастили и выпустили</p> <p>много ребятишек. Многие из них уже закончили</p> <p>школу и даже институт.Мы с радостью хотели</p> <p>бы встретиться с нашими выпускниками,их</p> <p>родителями,коллегами,друзьями на празд-</p> <p>-ничном вечере!Желающие принять участие в</p> <p>нашем юбилее – отзовитесь!Предварительная</p> <p>дата встречи- 9 ноября...</p> <img src="news/news 2.JPG" width="327" height="208"> </td> </tr> <tr> <td background="img/news_footer.png" width="400" height"10" class="news_footer"> </td> </tr> </table>--> </div> <div class="clear"></div> <div id="sidebar"> </div> <div class="clear"></div> <div id="footer"> </div> </div> <body> </body> </html> Хтмл пример с новотными блоками <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/styles.css"> <title>B?rnud?rzs R?GELE</title> </head> <div id="wrapper"> <div id="header"> <div id="top_line"> <ul> <li class="left"><a href="#">Главная</a></li> <li class="normal"><a href="#">О нас</a></li> <li class="normal"><a href="#">Детский сад</a></li> <li class="normal"><a href="#">Студии и курсы</a></li> <li class="normal"><a href="#">Летний отдых</a></li> <li class="right"><a href="#">Монтессори</a></li> </ul> </div> <div id="logo"> <div id="nadpis"><img src="img/logo_nadpis.png" width="403" height="78"></div> <div id="photo_1"><img src="img/logo_photo1.png" width="245" height="190"></div> <div id="photo_2"><img src="img/logo_photo2.png" width="245" height="189"></div> <div id="photo_3"><img src="img/logo_photo3.png" width="250" height="188"></div> </div> </div> <div id="content"> <span id="content_title">Новости</span> <table class="news"> <tr> <td background="img/news_head.png" width="400" height"40" class="news_header"><span> </span><span class="news_title">16 октября 2012 года в 17:30</span></td> </tr> <tr> <td background="img/news_center.png" width="400" height"1" class="news_center"> <p>Состоится собрание для родителей детей от 0</p> <p>до 3 лет, которые планируют посещать</p> <p>студию "Вместе с мамой" (новая группа) и ещё</p> <p>не был на собрании.</p></td> </tr> <tr> <td background="img/news_footer.png" width="400" height"10" class="news_footer"> </td> </tr> </table> <table class="news"> <tr> <td background="img/news_head.png" width="400" height"40" class="news_header"><span> </span><span class="news_title"><b>Нам исполняется 20 лет!</b></span></td> </tr> <tr> <td background="img/news_center.png" width="400" height"1" class="news_center"> <p>Наш центр начал свою работу 1 сентября 1992</p> <p>года.За эти годы мы вырастили и выпустили</p> <p>много ребятишек. Многие из них уже закончили</p> <p>школу и даже институт.Мы с радостью хотели</p> <p>бы встретиться с нашими выпускниками,их</p> <p>родителями,коллегами,друзьями на празд-</p> <p>-ничном вечере!Желающие принять участие в</p> <p>нашем юбилее – отзовитесь!Предварительная</p> <p>дата встречи- 9 ноября...</p> <img src="news/news 2.JPG" width="327" height="208"> </td> </tr> <tr> <td background="img/news_footer.png" width="400" height"10" class="news_footer"> </td> </tr> </table> </div> <div class="clear"></div> <div id="sidebar"> </div> <div class="clear"></div> <div id="footer"> </div> </div> <body> </body> </html> цсс код @charset "utf-8"; /* CSS Document */ body { margin:0; padding:0; background-image:url(../img/bg.jpg); font-family:Arial, Helvetica, sans-serif; } #wrapper { background-color:#fff; margin-left:15%; margin-right:15%; width:70%; max-width:1010px; height:auto; box-shadow:0 0 62px #fff; moz-box-shadow:0 0 62px #fff; webkit-box-shadow:0 0 62px #fff; filter: progid:DXImageTransform.Microsoft.shadow(direction=90, color=#fff, strength=62px); } .clear { clear:both; } #header { margin:0; padding-top:1px; } /*—————————--Верхняя панель———————————-*/ #top_line { margin:auto; width:99.7%; height:40px; outline:1px solid #999; border:1px solid #fff; background: #ececed; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VjZWNlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNWQyZDIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #ececed 0%, #d5d2d2 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ececed), color-stop(100%,#d5d2d2)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ececed 0%,#d5d2d2 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ececed 0%,#d5d2d2 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ececed 0%,#d5d2d2 100%); /* IE10+ */ background: linear-gradient(to bottom, #ececed 0%,#d5d2d2 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececed', endColorstr='#d5d2d2',GradientType=0 ); /* IE6-8 */ } #top_line ul { list-style:none; width:100%; margin-top:0; margin-left:-40px; } #top_line ul li a { width:160px; height:40px; margin-left:0; float:left; font-size:14pt; color:#333; text-decoration:none; text-align:center; display:table-cell; vertical-align:bottom; padding-top:10px; } li.normal { border-right:1px solid #999; border-left:1px solid #fff; width:160px; height:40px; float:left; } li.right { border-left:1px solid #fff; width:177px; height:40px; float:left; } li.left { border-right:1px solid #999; width:177px; height:40px; float:left; } li:hover { box-shadow:0 0 10px #000; moz-box-shadow:0 0 10px #000; webkit-box-shadow:0 0 10px #000; filter: progid:DXImageTransform.Microsoft.shadow(direction=90, color=#000, strength=10px); } /*—————————--Верхняя панель———————————-*/ /*—————————--Лого———————————-*/ #logo { margin-top:1px; width:100%; height:220px; background: #4e9a06; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRlOWEwNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzczZDIxNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4YWUyMzQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #4e9a06 0%, #73d216 50%, #8ae234 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4e9a06), color-stop(50%,#73d216), color-stop(100%,#8ae234)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #4e9a06 0%,#73d216 50%,#8ae234 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #4e9a06 0%,#73d216 50%,#8ae234 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #4e9a06 0%,#73d216 50%,#8ae234 100%); /* IE10+ */ background: linear-gradient(to bottom, #4e9a06 0%,#73d216 50%,#8ae234 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e9a06', endColorstr='#8ae234',GradientType=0 ); /* IE6-8 */ position:relative; } #nadpis { position:absolute; top:70px; z-index:5; } #photo_1 { position:absolute; top:20px; left:370px; z-index:4; } #photo_2 { position:absolute; top:20px; left:550px; z-index:3; } #photo_3 { position:absolute; top:20px; left:740px; z-index:4; } /*—————————--Лого———————————-*/ /*—————————--Контент———————————-*/ #content { width:45%; height:300px; margin-left:3.5%; margin-top:15px; float:left; } #content_title { color:#333; font-size:24pt; text-shadow:0 0 1px #999; margin:0 33%; float:left; display:block; } .news { margin-top:30px; margin-left:5%; position:relative; float:left; } .news_title { color:#000; font-size:15pt; padding-left:15%; } .news_center { position:relative; top:-2px; } .news_text { font-size:13pt; padding:0 15px; } .news_center p { font-size:13pt; padding:0 15px; line-height:3px; } .news_center img { padding:2px 35px; } .news_footer { font-size:6px; position:relative; top:-4px; } /*—————————--Контент———————————-*/ /*—————————--Сайдбар———————————-*/ /*—————————--Сайдбар———————————-*/ /*—————————--Футер———————————-*/ #footer { width:100%; height:80px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VjZWNlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNWQyZDIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #ececed 0%, #d5d2d2 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ececed), color-stop(100%,#d5d2d2)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ececed 0%,#d5d2d2 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ececed 0%,#d5d2d2 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ececed 0%,#d5d2d2 100%); /* IE10+ */ background: linear-gradient(to bottom, #ececed 0%,#d5d2d2 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececed', endColorstr='#d5d2d2',GradientType=0 ); /* IE6-8 */ } /*—————————--Футер———————————-*/
