Question

I have the following HTML and CSS in a jsfiddle:

<div class="MyBox">

    <div class="TopText">text here</div>    
    <div class="MyText">text</div>
    <div class="MyText">text</div>
    <div class="MyText">text</div>
    <div class="MyText">text</div>
    <div class="MyText">text</div>
    <div class="OtherText1">text1</div>
    <div class="OtherText2">text2</div>

​</div>

.MyBox{
    padding:10px 10px;
    position:absolute;
    margin:10px 0px;
    ​border:5px solid black;}

.TopText{clear:right;}

.MyText{
    float:left;
    margin:10px 10px;}

.OtherText1{
    clear:left;
    float:left;
    margin:10px 10px;}

.OtherText2{
    float:left;
    margin:10px 0px 10px 50px;}

The divs of class MyBox need to be absolutely positioned. The problem is that the MyBox div sizes itself nicely when I don’t have the OtherText divs in the container div but if I have these divs then it seems like the container div resizes itself by adding their width. This problem seems to be only visible in Chrome, which is rather weird.

How do I fix that?

Thanks.

Answer 1

Insane trick: add float:left to the absolute positioned MyBox for extra shrinkwrap power:

http://jsfiddle.net/SyKfm/2/

.MyBox {
    position:absolute;
    float: left;

There was a similar question a few day ago, but it had an abs. positioned max-width div:

Div smart width