<div id="tabContent">
    <ul>
        <li><a href="#welcome_page">Welcome Page</a></li>
        <li><a href="shopping.html" Title="Shopping contents">Shopping</a></li>
        <li><a href="#real_estate_contents">Real Estate</a></li>
        <li><a href="#service_entertainment_contents">Entertainment</a></li>
    </ul>
        <div id="welcome_page">            
            <div class="column">
                <div class="portlet">
                    <div class="portlet-header">Links</div>
                    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
                </div>
            </div>
        </div>
        <div id="real_estate_contents">
         </div>
        <div id="service_entertainment_contents">Under Construction</div>        
</div>        

The above is my code snippet, I am using jQuery UI. However, I found this problem somewhere else, too, not specific to jQuery UI anyway.

The problem is that when the page loads, only the contents in the last tab "Entertainment" gets proper resizing to fit.

Whatever else that uses div's to wrap don't get computed.

I've read something about being cautious with the use of div and other similar tags before, I do not remember the details. I believe that I'm in one of those situations.

Can anyone point me to the right direction? Thanks.

  • Take a look at the demo here: http://jqueryui.com/demos/tabs/ajax.html Is that considered a problem for your case? o.k.w over 9 years ago
  • The demo works fine, but I am mixing two jQuery UI widgets together and I don't think I am doing it properly. I am still copy and paste and tweaking codes as I go along. In the demo, I noticed that everything in the tabs resizes properly because they are enclosed in the paragraph tag. The p tag has predetermined height, so it is easy to compute when the page loads. Unless I set heights to the div, I don't think CSS can compute the height on the fly, and thus not be able to resize the height of the container. Which I did not really want to do, because the container will then be fixed to some sizes, and my web app need to be so very dynamic. I prefer to let CSS do most of the work. Still, I have some alternatives, like setting the container to sizes that fit the screen, make it scrollable, and make the portlet scrollable to its contents, too. I will need to experiment with them and talk to my designer later on. Thanks for the reply. =) Steve Hsieh over 9 years ago

1 answer

0
points
<div style="clear:both"></div>

Somebody suggested adding that on the bottom of the container to force a re-size. It works. This is the How, but I need to know the Why. Anyone? =p

Answered over 9 years ago by Steve Hsieh