Inherit div height

[HaLo2FrEeEk]

Ok, here's my issue. I'm working on a site that uses divs. I absolutely hate divs, but that's what was requested for this project. The layout is a centered, fixed-width design. The header, menu, banner, content, and footer all go straight down the center. Along the edges is a shadow of sorts. Through the header, menu, and banner the shadow is continuous, but when it gets to the content it fades off.

I have the image that it's supposed to be using, and I set it as the background image of the to border divs. I set these divs to inherit their height from the parent div, which is set to 100% (the body, html{} CSS also has a height: 100%; attribute). Also inside the parent div is the actual content div, which is what ends up stretching the parent div's height. The problem is that the border divs are NOT stretching. They should, at least, be the same height as the content div, but they remain at 0px in height. I also tried setting height: 100% and that didn't do anything. The only way I can get them to show up is the set pixel values for their height, but I'd like to avoid that.

There's really not much more information I can get. The project I'm working on is...privelaged information, not released yet, so I can't link to an example, but I hope that someone can understand my issue and PLEASE help.

[drhowarddrfine]

Try adding 'overflow:auto' to the div containing the background image that's not stretching.

If you hate div, do you hate p, too? They're just html elements that have been around for over 10 years.

[HaLo2FrEeEk]

I hate divs because I'm used to the bad way: tables. I ended up figuring it out by manually defining the pixel value height for the div, I figured that'd be the best way to do it, because the content might not always stretch far enough to show the entire background image.

And I do hate <p>, I never use it, though I probably should. I use span a lot, though.

[TheServant]

@HaLo2FrEeEk
When I started I too used tables. I spent a good year of my HTML practice using Strict HTML so that I could drum it into myself about what is the correct HTML. Doing this can be difficult at first, but you will become a better coder and use all the elements correctly, reducing errors resulting from browsers needing to fix your incorrect code.

[HaLo2FrEeEk]

Oddly my code that uses tables validates with the W3C HTML validator. It's HTML 4.01 though, not XHTML.

[TheServant]

@HaLo2FrEeEk
Using tables for layout is not incorrect, it's just bad practice. Using <span> out of <p> and the like is incorrect and bad practice. Anyway, upto you.

[ansaripk]

Another way you can use it more easily. try this method.

#headerWrap {
width:100%; height:auto;
background:url(shadow.png) repeat-x bottom left;
}
#header {
width:100%; height:100px;
}
.
.
.
<div id="headerWrap">
<div id="header">
............
...........
......
</div>
</div>
 
 

this method might solve your problem. Try to learn new techniques instead of hating divs.