Форум Сайтостроение Веб-строительство

Решение задачи по css и html. Резиновый блок по вертикали

Ben_Laden
На сайте с 26.03.2011
Offline
92
Ben_Laden
6600

Добрый день!

Есть некоторая задача, на которую не хватает знаний и которую нужно очень срочно решить!

Помогите решить ее, и не посылайте учить css/html, на это сейчас нету времени.

Суть задачи. приложу две картинки что бы понятнее объяснить.

Необходимо что бы боковой блок (сайдбар) был резиновый и его высотоа должна зависеть от размера текста.

Нужно что бы сайдбара выполнялась заливка при увеличении текста, так как видно на картинке 1 там сейчас черная заливка от блока content в котором находится сайдбар и пост.

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

пример кода под шапкой такой:

--------------------------------- 


<div id="content">  



    <div id="post"></div>  

       

    <div id="sidebar">

        <ul>

            <li><a href="#">menu</a></li>

            <li><a href="#">menu</a></li>

        </ul>

    </div>

    

</div>
jpg 321.jpg
jpg 321121.jpg
G
На сайте с 07.06.2009
Offline
37
gordi
#1

Думаю это поможет - http://csslayout.ru/i/layout/float/floatcr.html

Все о разметке web-страниц (http://csslayout.ru)
Ben_Laden
На сайте с 26.03.2011
Offline
92
Ben_Laden
#2
Ben_Laden:
Добрый день!

Есть некоторая задача, на которую не хватает знаний и которую нужно очень срочно решить!
Помогите решить ее, и не посылайте учить css/html, на это сейчас нету времени.

Суть задачи. приложу две картинки что бы понятнее объяснить.
Необходимо что бы боковой блок (сайдбар) был резиновый и его высотоа должна зависеть от размера текста.
Нужно что бы сайдбара выполнялась заливка при увеличении текста, так как видно на картинке 1 там сейчас черная заливка от блока content в котором находится сайдбар и пост.

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

пример кода под шапкой такой:
--------------------------------- 


<div id="content">  



    <div id="post"></div>  

       

    <div id="sidebar">

        <ul>

            <li><a href="#">menu</a></li>

            <li><a href="#">menu</a></li>

        </ul>

    </div>

    

</div>

Тема закрыта вопрос решен! Все генеальное просто

богоносец
На сайте с 30.01.2007
Offline
754
богоносец
#3 

<!doctype html>
 <head>
 	<style>
body { background-color: #666; margin: 0 }
#header { background-color: #9A7; text-align: center;  padding: 1em; }
#content { text-align: left; max-width: 800px }
#post { background-color: #FFF; width:80%; display: table-cell; padding: 2em }
#sidebar{ background-color: #9AC; width:20%; display: table-cell }
	</style>
 </head>
 <body>
  <div align="center">
   <div id="content"> 
	<div id="header"> <h1>ГавноСайт!11</h1> </div>
	<div id="post">post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post<br><br>
post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post post 
	</div>  
       
	<div id="sidebar">
		<ul>
			<li><a href="#">menu</a></li>
			<li><a href="#">menu</a></li>
		</ul>
	</div>    
   </div>    
  </div>
 </body>
</html>

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий