I am using the below HTML code. Below is what I am trying to achieve: I want to parent DIV to take the width of the 'Longest' width of its child DIV. If you look at the below HTML code segment#1, it works fine but if you look at HTML code segment #2, you will see that the "Test Title" border did not change its DIV width as per the DIV width of its longest child DIV. Please provide any pointers. Thanks.
<!-- HTML code segment#1 -->
<html>
<body>
<div style="font-family:Arial; fontsize:11px;border-style:solid;border-width:1px;padding:1px;position:absolute;width:auto;" >
<span tyle="padding:1px,7px,1px,7px; background- color:Blue;color:White;position:fixed;height:25px;" >
<span style="padding:1px,7px,1px,7px;height:25px; middle; text-align: center; padding-top: 2px; font-weight: bold; vertical-align: middle;">
Test Title
</span>
</span>
<div style="margin-top:3px;" >
<p style="padding:2px,1px,2px,1px; margin:0px;">Testing Text1</p>
<p style="padding:2px,1px,2px,1px; margin:0px;">Testing Text2 which is Long</p> </div>
</div>
</body>
</html>
<!-- HTML code segment#2 -->
<html>
<body>
<div style="font-family:Arial; fontsize:11px;border-style:solid;border-width:1px;padding:1px;position:absolute;width:auto;" >
<span tyle="padding:1px,7px,1px,7px; background- color:Blue;color:White;position:fixed;height:25px;" >
<span style="padding:1px,7px,1px,7px;height:25px; middle; text-align: center; padding-top: 2px; font-weight: bold; vertical-align: middle;">
Test Title
</span>
</span>
<div style="margin-top:3px;" >
<p style="padding:2px,1px,2px,1px; margin:0px;">Testing Text1</p>
<p style="padding:2px,1px,2px,1px; margin:0px;">Testing Text2 which is Longggggggggggggggggggggggggggggggggggggggggggggggggggggg</p> </div>
</div>
</body>
</html>