How do I position my nested DIVs?

Sean^DCT4

Hi all,

I am writing a .NET page that has mainly html code in it.

I have one main DIV that is used as a container for the other DIVs (header, content and footer)

The problem I am having is that when I add anything inside the content DIV the image inside the main DIV is

placed on top of the content DIV and therefore it's not visible.

I have tried setting the z-index of the content div but that has no affect on it.

-------------------------------------
HTML
-------------------------------------
<div class="main">
                <div class="header">
                    Lorem Ipsum Dolores
</div>
                
                <img src="/Images/background.gif" alt="" width="100%" height="100%" />
                <div class="content">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
                <div class="footer">
                    <p>
                        Footer Content</p>
                </div>
            </div>
 
 
-------------------------------------
CSS Class:
-------------------------------------
body
{
        margin: 0;
        padding: 0;
        height: 100%;
        overflow:auto;
}
html
{
        height: 100%;
        overflow: hidden;
}
.header
{
        z-index: 100;
        background-color: #303030;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 40px;
        clear: both;
}
.main
{
        z-index: 100;
        position: absolute;
        top: 0;
        left:0;
        margin: 0;
        width: 100%;
        height: 100%;
        min-height: 100%;
        color: #FFFFFF;
}
.content
{
        z-index: 101;
        position: absolute;
        height: 100%;
}
.footer
{
        z-index: 100;
        position: absolute;
        bottom: 0;
        right: 45%;     
}

Adam

take out the image from the html and add the following css to the main div:

background-image: url('Images/background.gif');
background-repeat: repeat-x;

Sean^DCT4

thanks Adam, that's almost working.

The only problem is that the background image stops where the footer div is. I thought that as the footer is nested in the main DIV that it would cover this too.

Any suggestions as to how I can make the background image span the footer DIV aswell?

Thanks in advance.

Adam

Sean^DCT4 wrote: »

thanks Adam, that's almost working.

The only problem is that the background image stops where the footer div is. I thought that as the footer is nested in the main DIV that it would cover this too.

Any suggestions as to how I can make the background image span the footer DIV aswell?

Thanks in advance.

i dont believe it does sean, its only 600px tall and on any decent resolution it wont even stretch the height of the browser window...and if you resize, the footer text just sits over the bottom of the image the way i think you want it to...

Sean^DCT4

I should have mentioned that I need to get this to work for just IE7.

I have attached a screenshot of my problem.

Thanks Adam

Sean^DCT4

Adam wrote: »

i dont believe it does sean, its only 600px tall and on any decent resolution it wont even stretch the height of the browser window...and if you resize, the footer text just sits over the bottom of the image the way i think you want it to...

Sorry I misread. I resized the image to 800px in height and it works perfect.

Thanks for the help

Adam

no worries. but bear in mind, your footer is still not actually contained by the main div. the reason for this is that all the divs have absolute positioning. try adding text to the content div that extends the browser window and makes you scroll.

here's a good tutorial on div positioning if you're unsure at all: http://www.barelyfitz.com/screencast/html-training/css/positioning/

Sean^DCT4

Adam wrote: »

no worries. but bear in mind, your footer is still not actually contained by the main div. the reason for this is that all the divs have absolute positioning. try adding text to the content div that extends the browser window and makes you scroll.

here's a good tutorial on div positioning if you're unsure at all: http://www.barelyfitz.com/screencast/html-training/css/positioning/

I have seen this tutorial not so long ago. I tried to follow it and apply some of the techniques to my page but I cannot seem to get the DIVs working if the content is larger than the page.

The footer stays at the bottom although the content div goes under the footer and you cannot scroll down.

I tried setting the main DIV to relative positioning and the content&footer to absolute which I thought would do it but it still does nothing.


Suggestions welcome.