Keeping divs floating next to each other when overflow

Question

Hi!

I hope to explain my problem simple in order to get good feedback :)

Imagine this scenario: One DIV wrapper within two floating DIVs, next to each other, with fixed width. All of them with overflow hidden.

But when decreasing the width of the wrapper (or increasing the children's) the last DIV collapsed instead of hide. Please, check out the code. THANK you very much in advance!

#wrapper{
 width:400px; 
 overflow:hidden;
 border:1px dashed #0033FF;  
}
#wrapper .tContent{
 width:210px; 
 height:200px; 
 float:left;
 overflow:hidden;  
}

 HTML:
<div id="wrapper">
<div class="tContent">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
    </p>
</div>
  <div class="tContent">
 <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat        </p>
 </div>

How do you solve that? avoid the collapsing and keeping the floating and hiding if necessary?

Answer 1

This is the expected behavior. You will need to add another div inside your wrapper with a fixed width large enough to accommodate both floats.

Example:

<div id="wrapper">
    <div class="wide">
        <div class="tContent">
        </div>
        <div class="tContent">
        </div>
    </div>
</div>

<script type="text/javascript">

    var total = 0;

    $(window).load(function() {

        $(".tContent").each(function(){ 
         total += $(this).width();
        });

        $(".wide").width(total);

    });
</script>

Answer 2

The width of your both inner divs should not be bigger the the width of the wrapper. In order for this code to work, .tContent must have 200px width. Also, see this http://www.w3.org/TR/CSS2/box.html