CSS: Maintaining Background declaration in nested divs

[TechBoyJK]

Hi Guys,

I'm building a page, and the body has been given a background color. I have a container DIV, and within it are several divs that hold individual elements. I need the background of the container div and everything in it to remain white, regardless of the color of the body background.

<!--- Body tag --->
body
{
background: #FF00AA; color: #000000;
font: .8em arial, helvetica, sans-serif;
margin: auto;
padding:0px;

}

<!--- container div---->
#pages
{ background-color:#FFFFFF;
width: 900px;
}

<!--- nested container divs --->

#pages title
{
display: inline;
width: 375px;
float: left;
padding:0 .25em .5em 0;
}


#pages categories
{
display: inline;
width: 20%;
float: left;
padding:0 0 0 0;
}

But this isn't working.. What am I doing wrong here? I just need to make sure EVERYTHING's background is white when it's placed within the container div (pages).

 

[Ka0t1x]

Why are there no ID/Class symbols on the title/categories? Are these classed/ID'd too?

The css is nothing without the HTML. .. please use code tags..

 

[TechBoyJK]

my html is filled with CFML surrounding it.. not sure if it were to make much sense if I posted it all. I posted a mock up of how it's put together below.

about the title/categories... should they look like this? I've been playing with the CSS all day so I might not have posted a working copy of the css..

#pages div.categories
{
display: inline;
width: 20&#37;;
float: left;
padding:0 0 0 0;
}


The html would look something like

<div class="pages">

<h2>Create a Page <INPUT class="h2_button" type="submit" name="Submit" value="save">
</h2>

<div class="core_title">
<CFINPUT class="input" NAME="title" value="#form.title#" size="60" maxlength="60">
</div>

</div>

 

[PhatoseAlpha]

#pages refers to an element with an Id of pages, not a class of pages. You need .pages.


Have you looked at the page with firebug? Realistically, that should be your first step - see what css rules are applying with the inspect tool.

 

[Woosta]

If you need to contain floats, do

#pages { overflow:hidden; }

to establish a new block formatting context which clears floats.

 

[TechBoyJK]

So I would want the following... correct?

<!--- container div---->
div.pages
{ background-color:#FFFFFF;
width: 900px;
}

<!--- nested container divs --->

.pages title
{
display: inline;
width: 375px;
float: left;
padding:0 .25em .5em 0;
}

 

[Woosta]

Did you get the overflow hidden part from my message? Also, if that doesn't solve it please throw your HTML/CSS on jsfiddle.net and link us.

 

[TechBoyJK]

I thought floats were for positioning? I just want to make sure the background colors of all the divs within another div are the same color as the containing div.

 

[Woosta]

I thought floats were for positioning? I just want to make sure the background colors of all the divs within another div are the same color as the containing div.

Have you tried the overflow hidden yet?

 

[TechBoyJK]

Is this issue with Floats that if the nested Divs are floated out of the containing DIV (and the containing div doesn't expand to contain the child divs), the background won't be applied?

 

[TechBoyJK]

yup fyi that did it..

 

[Ka0t1x]

When dealing with divs and possible errors I almost always assign a border of a bright color (only for debugging). This way I can see where/how the div is being rendered.