Background-color without height

Question

I am building a fixed width site, 970px, centered, with a gradient as the surround. Originally the fixed width portion was white with several horizontal areas (menu, search area, product selection area) having a different background. This was accomplished simply with a background color of white for a div that is the next child of the body, which contained all the content of the page, and an override to the background color when needed. This worked fine.

Can I make these horizontal areas have the same background as the gradient, which will obviously be different at different places in the page? I thought I would simply keep the background-color transparent (the default) at all levels until I came to the parent of content I want white, making that parent's background-color #FFFFFF. This works if I specify a height to the area. However, the main body of the website will be of indeterminate height, and must be white (or something other than the gradient!). Are there any techniques through which I can force an element and its contents into a white background without specifying a height on that element?

Thanks.

Thanks for the response. I should clarify with code so that the question is clear. Sorry for that.

Here is sample HTML that illustrates the problem:

<body>
<div id="Page">
    <div id="Header">
        <div id="HeaderNavigationSection">
            <div id="HeaderNavigationMenu">
                <ul>
                    <li><a href="#">Menu Item One</a></li>
                    <li><a href="#">Menu Item Two</a></li>
                </ul>
            </div>
        </div>
        <div id="HeaderBannerSection">
            <a href="#">
                <img id="CompanyLogo" alt="Company Logo" src="" height="45" width="200" />
            </a>
            <p id="BannerSloganOne">Banner Slogan One Text</p>
            <p id="BannerSloganTwo">Banner Slogan Two Text</p>
        </div>
        <div id="HeaderSearchSection">
            <div class="HeaderSearchSectionLine">
                <p class="HeaderSearchBoxLabel">Search Label One and Related Search Area</p>
            </div>
            <div class="HeaderSearchSectionLine">
                <p class="HeaderSearchBoxLabel">Search Label Two and Related Search Area</p>
            </div>
        </div>          
    </div>
</div>
</body>

First, here is CSS that works, using a page-level white background color and a section level different background color (yellow for illustration). This works throughout my code. I do not show any resets or basic settings. Note that the commented-out CSS for the #HeaderBannerSection is not needed (it appears in the code that doesn't work, which is shown after this code).

html {
height: 100%;
background-color: #D4D4D4; /* surrogate for browser-specific gradient */}

body {
text-align: center;}

#Page {
width: 970px;
margin: 0px auto 10px auto;
line-height: 1.2;
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: left;
background-color: #FFFFFF;}

#HeaderNavigationSection {
height: 30px;
background-color: #FFFF00;}

#HeaderNavigationMenu {
display: inline;
float: right;}

#HeaderNavigationMenu li {
display: inline;
float: left;}

#HeaderNavigationMenu li a {
display: inline;
float: left;
margin: 8px 0px 10px 0px;
padding: 0px 10px 0px 10px;}

#HeaderBannerSection {
/*width: 970px;*/
/*background-color: #FFFFFF;*/}

#CompanyLogo {
display: inline;
float: left;
width: auto;
margin: 10px 0px 10px 10px;}

#BannerSloganOne {
display: inline;
float: left;
width: 330px;
margin: 20px 0px 20px 80px;}

#BannerSloganTwo {
display: inline;
float: right;
width: 300px;
margin: 20px 10px 20px 0px;
text-align: right;}

#HeaderSearchSection {
clear: both;
height: 68px;
background-color: #FFFF00;}

.HeaderSearchSectionLine {
clear: both;}

.HeaderSearchBoxLabel {
display: inline;
float: left;
margin: 10px 0px 0px 10px;}

Here are the changes to that CSS that attempt to make the html-level background color (namely the gradient) the default, through transparency, except where specifically overridden where desired (in this example, for the #HeaderBannerSection (with code from above commented out as needed)):

#Page {
width: 970px;
margin: 0px auto 10px auto;
line-height: 1.2;
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: left;
/*background-color: #FFFFFF;*/}

#HeaderNavigationSection {
height: 30px;
/*background-color: #FFFF00;*/}

. . .

#HeaderBannerSection {
width: 970px;
background-color: #FFFFFF;}

. . .

#HeaderSearchSection {
clear: both;
height: 68px;
/*background-color: #FFFF00;*/}

This code does not work. The background-color for the section that should be white instead remains the gradient. This is true unless I specify a height for the section, then it all works. But I won't be able to specify the height for the main section (not shown) unless I do a jQuery to determine rendered height and then do a jQuery css height setting (not ideal, and haven't even tried it yet to see if it works). Incidentally, the offending code does work in IE6 and IE7 (at least as rendered in Expression Web 4 SuperPreview).

Thanks again for any help you can give me.

so you want the element (ill name it div1 for simplicity) inside of the body to be transparent, but other elements inside of div1 to be white ? there is a lot of text and no visual aid so its hard to understand what you are asking. Perhaps you can provide a mock up or some sort of visualization of what you are asking ? — Lyuben Todorov
Thank you for your willingness to look at this problem. The full HTML and CSS is provided above in an edit. I hope you will be able to see, and perhaps to replicate, the problem with this new information. — Jack Herr
Adding the following line of code to the jQuery document ready function works (as mentioned in my edit that it might). But is there a straight CSS way? $(".#HeaderBannerSection").css("height", ("#HeaderBannerSection").height()); — Jack Herr
I take that back. That line of code didn't work (I slipped in an actual height when playing with it). Will find the right jQuery and post if I can. — Jack Herr
Please look below for how to set the width of the div, if you want to set the height just use min-height:200px; where this will make it at least 200 pixels high — Lyuben Todorov

Lyuben Todorov Lyuben Todorov · Accepted Answer · 2012-03-22T09:53:10

For your banner section try this jsfidle

the min-width property forces the div to have a specific minimum width if the content inside it is not enough to fill it (it will be the specified width by default until the content in it is so much that the div has to expand)

I've changed the background colour so that you can see the actual div @ work feel free to change to #FFFFFF once you are sure you have gotten it correct.

Background-color without height

1 Answers