Expand div based on content.

[kpikul]

I have a table cell with the class, AdvLayoutRightNav. With in this cell I have a div with the ID eventInfo. Within this div, I have another div with the class info.

So here is what it looks like without the content....

<td class=AdvLayoutRightNav><div id=eventInfo><div class=info></div></div></td>

The issue that I am having is that I have a nowrap on the info div. This text over laps the eventInfo borders.

How do I get the eventInfo to expand to accomodate the content of the info div?

I have successful done it in IE7 and IE8 but not both at the same time.

CSS of the DIVS below:


td.AdvLayoutRightNav{
width:180px;
padding:10px;
border-right:1px solid #DC5034;
padding-top:20px;
}



div#eventInfo{
border:1px solid #3E3A36;
border-top:10px solid #3E3A36;
border-bottom:10px solid #3E3A36;
background: #F0F0F0;
padding:10px;
line-height:18px;
}



div.info{
padding-left:5px;
color: #444444;
}

[b1u3b0y]

Possibly try? height: auto;

[Kor]

Try removing the red line. As long as you need to accommodate a div inside another div, the line-height for the container div looks useless to me.

div#eventInfo{
border:1px solid #3E3A36;
border-top:10px solid #3E3A36;
border-bottom:10px solid #3E3A36;
background: #F0F0F0;
padding:10px;
line-height:18px;
}

[kpikul]

The issue I am having is with the width of the div not expanding. The hieght does expand.

I tryed width:auto but it did not work in all browsers