css div size

[wizkid]

here's the webpage created by me
nitesh.x10hosting.com

the problem is that the background image for the navigation panel does not fill up to the end of the page but only till below the menu

here's the css defiing the layout of my webpage

html 
{
width:100%; 
max-width:100%;  
padding:0; 
margin:0; 
border:0; 

}

body 
{width:100%; max-width:100%;  padding:0; margin:0; border:0}



#head 
{
position: absolute; 
margin:0; top: 0; right:0px; 
display:block; 
width:100%; height:150px; 
background: url(images/stars.jpg) ;  
z-index:5; 

opacity:1.0}

#user_status
{position: absolute; 
margin:0; top: 150px; 

display:block; width:100%; height:80px; 
 background:  url(images/stars.jpg) ; 
z-index:5;  opacity:1.0}




#left 
{
position: absolute; left:0; right:0; bottom:0; top:230px; 
height: inherit; width:25%; 
padding-top: 15px; 
overflow: visible;
background:  url(images/stars.jpg) repeat ;

z-index:4

}
#right 
{
position: absolute; left:25%; right:0; bottom:0; top:230px; 
padding : 10px 0 0 10px;
height:100%;
border-left: ridge #003333 thick;  
border-top: ridge #003333 thick;  

z-index:3
}

#foot 
{
position: absolute; margin:0; top: 0px; right:0px; display:block; width:100%; height:150px; background: #0099FF;  z-index:5; color:#fff
}

div.head
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size: 30px;

text-align: center
}


div.content
{
display: inline;

font-family: "Courier New", Courier, monospace

}

how do i make it fill to the bottom of the page.

 

[TechAsh]

Try changing this:

#left 
{
position: absolute; left:0; right:0; bottom:0; top:230px; 
height: inherit; width:25%; 
padding-top: 15px; 
overflow: visible;
background:  url(images/stars.jpg) repeat ;

z-index:4

}

To this:

#left 
{
position: absolute; left:0; right:0; bottom:0; top:230px; 
height: 100%; width:25%; 
padding-top: 15px; 
overflow: visible;
background:  url(images/stars.jpg) repeat ;

z-index:4

}

 

[wizkid]

it had already tried this but then the background extended for a size equal to the browser window and after that it was again white.
actually i want the height of #left to be equal to whatever the height of #right is.
#right contains the main content hence its length can be variable.

 

[TechAsh]

Ok, I have a Firefox plug-in installed that lets me edit the source of any page. After editing the source and changing the thing I mentioned above, everything looked right, the background extended down to the bottom of the page, and I couldn't see any white.

 

[wizkid]

its probably because you saw only the home page.
check out this page
comments.php

could please you tell me the firefox plugin you were talking about.

 

[TechAsh]

The Firefox plugin is called Web Developer.
Link: https://addons.mozilla.org/en-US/firefox/addon/60

Looking at your site, it seems that you have fixed the problem.

 

[wizkid]

i tried setting up the background of the entire page.
however it didnt worked as expected.

please recheck that page i did some changes.

 

[Trigintillion]

Just a rough sketch of what you could do with tables:

<table style="height:100%; width:100%;"><tr>

<td style="height:200px;">[[I]Header area[/I]]</td>

</tr><tr>

<td>[[I]Space between left edge and nav panel[/I]]</td>

<td>[[I]Nav panel[/I]]</td>

<td>[[I]Space between nav panel and content area[/I]]</td>

<td>[[I]Content area[/I]]</td>

</tr></table>

 

[wizkid]

i do agree that it could be solved using tables , but i was trying to acomplish it without using tables as i have read that they are often considered innappropriate for creating page layouts.




Edit:

finally i have been able to get a workaround for the above problem by styling the div and span which are direct child of the div element with id right.
but the problem is that i end up selecting all the div and span elements inside the div element with id right and not the immediate child of the parent div element.
i tried
div#right>span
div>span#right
#right div>span
but none seemed to work.