HI Forum;

How can I increase div height automatically whenever I adding text or any ther content there ? which conditions I apply in css to overcome this problem?

HI Forum;

How can I increase div height automatically whenever I adding text or any ther content there ? which conditions I apply in css to overcome this problem?

 

hello just set the div height to auto is that what you mean

hello just set the div height to auto is that what you mean

Thnks Elite

I set it to auto. But it is not working. My problem is I want the div height to grow and shrink depending on what's in the box. Does it grow automatically or needs some Javascript also,but sorry I don't know Javascript. It clears IE7 test but not working in FireFox3.0

 

   

<div id="right_content">
		  <div class="buzz_box_up">
		  <div class="buzz_box_mid">
		  <!--pic01 start-->
		   <div class="buzz_wrapper">
		   <img src="skin/images/pic01.jpg" alt="" width="48" height="48" class="pic"  />
			  <div class="top">
			  <div class="buzz_text">
			  <span class="title">I Blogger!</span><br />
			  Lum is simply dummy
text of the Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
			  </div>
			</div>
		<!--Pic 01 Ends-->
	<!--pic02 start-->  
		   <div class="buzz_wrapper">
			<img src="skin/images/pic02.jpg" alt="" width="48" height="48" class="pic" />
			  <div class="top">
			  <div class="buzz_text">
			  <span class="title">Umrao Jaan </span><br />
			  Lum is simply dummy
text of the Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div></div>				
	</div>
	<!--Pic 02 Ends-->
	<!--pic01 start-->
		  <div class="buzz_wrapper">
		   <img src="skin/images/pic01.jpg" alt="" width="48" height="48" class="pic"  />
			  <div class="top">
			  <div class="buzz_text">
			  <span class="title">I Blogger!</span><br />
			  Lum is simply dummy
text of the Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
			  </div>
			</div>
		<!--Pic 01 Ends-->

</div>
		  <div class="buzz_box_dn"></div></div>
	  </div>

 

My Css Code:

#right_content
{
BACKGROUND-POSITION: 50% top;
FLOAT: right;
BACKGROUND-IMAGE: url(../images/Buzz.gif);
WIDTH: 298px;
MARGIN-RIGHT: 9px;
PADDING-TOP: 41px;
BACKGROUND-REPEAT: no-repeat;
}
.buzz_box_up
{
BACKGROUND-IMAGE: url(../images/Buzz_Box_up.gif);
WIDTH: 298px;
PADDING-TOP: 14px;
BACKGROUND-REPEAT: no-repeat;
HEIGHT: 14px
}
.buzz_box_mid
{
BACKGROUND-IMAGE: url(../images/Buzz_Box_Middle.gif);
BACKGROUND-REPEAT: repeat-y;
padding: 10px;
}
.buzz_wrapper{
display: block;
width: 280px;
clear: both;

}
.pic {
margin-left: 2px;
margin-top: 0px;
position: absolute;
}


.top{
background-image: url(../images/Buzz_angle.gif);
background-repeat: no-repeat;
margin-bottom: 10px;
float: right;
width: 75%;
margin-top: 0px;
}
.title{
margin-bottom: 0px;
font-weight: bold;
font-size: 14px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
.buzz_text{
width: 89%;
float: right;
background-color: #6AF160;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
z-index: 20;
padding: 5px;
}
.buzz_box_dn
{
BACKGROUND-IMAGE: url(../images/Buzz_Box_Dn.gif);
WIDTH: 298px;
BACKGROUND-REPEAT: no-repeat;
HEIGHT: 8px
}

The box should automatically re-size irrespective of the content within it, even if you've not declared a height. This is standard browser behaviour. If you've declared the height, either absolutely or through auto, , I'd be inclined to get rid of tit and see what happens.

Hi Badmotherz

this div buzz_box_mid (<div class="buzz_box_mid") is not increasing height. this div increases height if I add only text there. If I add my content then it is not rising height.........?????????

 

see the image

You need to clear you floats by the look of things mate

 

I will try to post up a more detailed answer but I am rammed at work at the moment (slap my hand for even being on the forum at all) but if you google 'clear:both;' or 'clearing floats' then that should spin up enough tuts to see you through