[RESOLVED]DIV size doesn't change according to the text/content

Hi All,

I have a Master page in which A root DIV–> 4 Parent DIVs –>3 DIVs in each parent div

<div class="page">
        <div class="header" style="background-image: url('Images/header.jpg')">
            <div class="title" >
                <h1>
                    My ASP.NET Application
                </h1>
            </div>
            <div class="clear hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" >
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                    </Items>
                </asp:Menu>
            </div>
        </div>
        <div class="midLayer">  ((((this is where the problem arise))))
            <div class="leftCol">
                <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"> </asp:Menu>
                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
            </div>
            <div class="centreCol">
                <asp:ContentPlaceHolder ID="MainContent" runat="server" />
            </div>
            <div class="rightCol">
                <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" />
            </div>
        </div>
        <div class="footer">
          <table style="width:100%">
            <tr style="width:100%">
                <td style="width: 30%; float: left"></td>
                <td style="width: 150px; float: left">
                <asp:HyperLink ID="HyperLink1" runat="server">about Us</asp:HyperLink><br />
                <asp:HyperLink ID="HyperLink2" runat="server">FAQ's</asp:HyperLink><br />
                </td>
                <td style="width: 30%; float: left"></td>
            </tr>
          </table>
        </div>
        <div class="footerCopyRight"> Copyright © 2013</div>
    </div>

The problem is when I have more text or any info in the content page it is over flowing to the next parent DIVs i.e footer and footerCopyRight

           <div class="centreCol">
                
                <asp:ContentPlaceHolder ID="MainContent" runat="server" />
                
            </div>

Header

LeftCol

Content Page

Actual problem here

[if the records are more , it is over flowing to on top of the below footer n copyright footer.

Right Col

Footer  

Copyright footer

I want the page hight to change as per the lenght of the records in content page, but not to over flow on to the next tags.
I want the page size to increase and have scroo bar for the page, footer show always remain at the bottom of the page.
Please help me. 
Here are the css styles used for the DIVs
.midLayer
{
    position: relative;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 100%;
    /* additional*/
    min-height: 575px;
    height: 100%;
}
.leftCol
{
    padding: 10px 0px 0px 10px;
    margin: 0px 0px 0px 0px;
    width: 200px;
    min-height: 565px;
    float: left;
    /* additional
    position: relative;
    border-bottom: 1px solid black;*/
    border-right: 1px solid black;
    height: 100%;
}
.centreCol
{
    padding: 5px 0px 0px 3px;
    margin: 0px 0px 0px 0px;
    min-height: 575px;
    width: 825px;
    float: left;
    border-bottom: 0px solid green;
    height: 100%;
}
.rightCol
{
    padding: 10px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: 200px;
    min-height: 565px;
    float: left;
    /* additional
    position: relative;*/
    border-left: 1px solid black;
    height: 100%;
}


try to set overflow:auto in midlayer and clear:both for footer.

Perfect, Thank you.

Can you also help how to get lok and feel for the table.

I am trying to build somthing like ESHOP template

http://www.beautifullife.info/web-design/25-best-free-online-stores-templates/

Right hand side you can see ENTRY & Latest NEWS  box with a feel good look.

How do I get that?

 

Leave a Reply