need a div to grow automatically as the table inside it

[pankajsingh5k]

Hi guys,

i only know basic css mainly the formatting part....

i want to create a side panel for my website that looks like a small window that has a blue header and blue borders and slightly curved bottam border...i did this by making images and setting them as backbround images fo the respective divs

here my code

 <div id="docket">
            <div id="header">
            </div>
            <div id="left">
            </div>
            <div id="middle">
            </div>
            <div id="right">
            </div>
            <div id="bottam">
            </div>
        </div>
 

and in the css i have defined these

#docket
{
    width:189px;
    height:auto;
}
#header
{
    width:100%;
    background:url(images/STRIP01.jpg) no-repeat;
    height:24px;
 
}
#left
{
    float:left;
    width:1%;
    background:url(images/STRIP0W2.jpg) no-repeat;
    height:80px;
 
 
}
#middle
{
    float:left;
    width:98%;
    background:url(images/popBG.jpg);
    height:80px;
}
#right
{
    float:left;
    width:1%;
    background:url(images/STRIP0W2.jpg) no-repeat;
    height:80px;
}
#bottam
{
clear:both;
width:100%;
background:url(images/STRIP0W3.jpg) no-repeat;
height:7px;
}
 

in the main div i will place a table that has say 6 or 7 rows with various options for the user such as profile visit,messsages,videos,pics etc...now sometimes i want to show or hide some rows based on privacy settings and i want it to resize automatically......

i an earlier post i learnt that float overflows its container but the rest was pretty cryptic to me.....tried using auto but that diidnt work

you will notice that the left,main,and right have fixed widths of 80px to incorporate six rows...so is there any way to do this???

it works pretty well except the fact that it doesnt resize automatically

[Hamayun Khan]

Place your table inside the div tag having id=middle and change the height and width to 100%

<div id="docket"> 
            <div id="header"> 
            </div> 
            <div id="left"> 
            </div> 
            <div id="middle">
<table><tr><td>&nbsp;</td></tr></table> 
            </div> 
            <div id="right"> 
            </div> 
            <div id="bottam"> 
            </div> 
        </div> 
 

[pankajsingh5k]

thanks for replying....

already treid that...it does cause the div to expand as neccessay...but then the left and right lines disapper and dont show...and all i get is a box with the header and the content and the bottam....no side images....which i think means that the left and right div are being over riden.

they only have a width of 1%

plz can anyone tell me how to do it

[Hamayun Khan]

why don't you use table instead of divs.

[acoder]

...because tables shouldn't be used for layout.