Помощ за <div>

[qazxsw]

Как мога да направя 1 div таг да се уголемява според текста в него?

Ето пример как е сега - http://shvepi.com/

Искам да направя така, че тъмният <div> да се разширява според размерите на съдържанието и това да не пречи на footer-a.

Ето кода за тъмният <div>

#rightcolumn { 
 float: right;
 color: #333;
 border: 1px solid #ccc;
 background:#CCC8B3;
 margin: 0px 0px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 678px;
 display: inline;
}

Ето кода за футера (ако е необходим)

#footer { 
 width: 900px;
 clear: both;
 color: #333;
 border: 1px solid #ccc;
 background-color:#F3F2ED;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}

И бих искал да попитам, там където съм написал "test, test, test" текста е в центъра на екрана а аз не съм го задавал това?

  <div id="rightcolumn">
  
	
	<div class="custom-text-center"><h2>Добре дошли в контролният панел!</h2></div>
	
	
	<div class="custom-content-layout">test test test test test test test t test test test test test test test test test test test test test test test test test test test
	</div>
  </div>

Ето и css-a:

.custom-text-center
{text-align: center;}

.custom-content-layout
{padding: 80px;}

 

[GaTio2]

.custom-text-center
{text-align: center;}

това е за текста в центъра ако искаш го махни и няма да е в центъра

#rightcolumn {
float: right;
color: #333;
border: 1px solid #ccc;
background:#CCC8B3;
margin: 0px 0px 5px 0px;
padding: 10px;
height: 100%;
width: 678px;
display: inline;
}

това да стане 100%

а ако не стане със 100%

го направи

height: 100%px;

 

[shterev]

#rightcolumn {
background:none repeat scroll 0 0 #CCC8B3;
border:1px solid #CCCCCC;
color:#333333;
display:inline;
float:right;
min-height:350px;
margin:0 0 5px;
padding:10px;
width:678px;
}

 

[shterev]

.custom-text-center
{text-align: center;}

това е за текста в центъра ако искаш го махни и няма да е в центъра

#rightcolumn {
float: right;
color: #333;
border: 1px solid #ccc;
background:#CCC8B3;
margin: 0px 0px 5px 0px;
padding: 10px;
height: 100%;
width: 678px;
display: inline;
}

това да стане 100%

а ако не стане със 100%

го направи

height: 100%px;

height: 100%px; <- такава простотия не бях виждал

 

[GaTio2]

знам, че сигурно няма но при 100% на някой места на мен ми го разширява до не знам къде... а като сложа height: 100%px; се оправя - за мене има :?:

 

[mKrotiFy]

background-repeat: repeat-y; :?:

 

[qazxsw]

Стоте процента помогнаха, но закриха футера.

Значи custom-text-center, го използвам за <h2></h2> а текста искам да е align left?

Добавих:

.custom-content-layout
{padding: 80px;
text-align: left;}

Но текста продължава да е в средата?

 

[shterev]

знам, че сигурно няма но при 100% на някой места на мен ми го разширява до не знам къде... а като сложа height: 100%px; се оправя - за мене има :?:

Я тоя същия ти код където е направо го махни това height:100%px; То миниго през валидатора, да видиш ,че ти дава грешка, и като има грешка, браузъра просто игнорира стойността и дефакто нямаш height

 

[qazxsw]

знам, че сигурно няма но при 100% на някой места на мен ми го разширява до не знам къде... а като сложа height: 100%px; се оправя - за мене има :?:

Я тоя същия ти код където е направо го махни това height:100%px; То миниго през валидатора, да видиш ,че ти дава грешка, и като има грешка, браузъра просто игнорира стойността и дефакто нямаш height

Не съм слагал height: 100%px; а само height 100%;

Минах го през валидатор за xhtml и css дава ми, че всичко е валидно дори без warnings.

 

[qazxsw]

Оправих се, благодаря! :?:

 

[adrian]

Ако искаш един див да има хем фиксирана минимална височина, хем да се разтяга в зависимост от съдържанието си се прави така, за да работи под всички браузъри:

min-height: 350px; height: auto !important; height: 350px;

Много е важен и редът на записване.