By default, a container does not wrap around floated contents. So your #centrebody div has zero height. One of the ways to make it wrap around its contents is with overflow: hidden, which forces it to look at what’s inside it and then enclose it. In a few circumesatances (such as when you purposely want something hanging out of the container) a different method is needed, but this solution works in most cases.
I would never have thought that would have worked, but you are indeed right.
Since it’s a wrapper, I really couldnt define a height (the size of all of the child elements can differ). Also, most of the child elements are floated, but I didnt think this would prevent inheritance…
Thanks Ralph (I think I’ll be reading your webdesign tips)
I didn’t pick you up on this before, but be careful of the word ‘inheritance’, as it really has a specific meaning in CSS that I don’t think you mean. Background color is not inherited by child elements. The wrapper has a background color, and that’s it. If the children are transparent, then you’ll see the background color behind them, but if the children have their own (solid) background color, the wrapper’s background color will be hidden.
In CSS, ‘inheritance’ means that if a container has a style set on it, that style is also transferred to the children. Here’s a link that will explain it way better than I can: Inheritance
Off Topic:
You won’t find much on my site, as I haven’t had time to add to it for so long. Must get around to that.
Backgrounds aren’t inherited anyway You see a background because the default value for a background is transparent and that’s why you see the background underneath the element you just placed.
If background was inherited you would then define an image on the body and then every single image on the page would have a background. That wouldn’t be much use lol
Only certain properties are inherited like font-size, font-family, color etc. You can find out which are inherited by default and which aren’t via the reference here.
As Ralph said the wrapper simply had no height because it only had floated children and therefore nothing would show.
As Paul said, Div’s don’t inherit backgrounds by default.
None also means no color, which you then declare – that doesn’t even make sense.
yeah, that looks like a lack of float clearing.
… though looking at the overblown over the top number of pointless DIV and classes in the markup (as I’ve come to call it, borrowing from Carlin “not every ejaculation deserves a name”), useless “gee ain’t it neat” scripting, non-semantic markup with nonsensical heading orders, accessibility train wreck of absurdly undersized fixed metric fonts, endless IE conditional hacks for NOTHING (If you have to target EVERY version of IE individually… there’s something HORRIBLY wrong with how the site is built!)… I mean, 12k of markup for 1.5k of plaintext and four content images – somethings gone awry.
I would advise throwing away that mess entirely… building with actual semantic markup with meaningful heading orders, (every h# becoming h1 in HTML 5 only applies if you use section/article! – you’ve got 4 tranny with a 5 slapped on it), accessible forms, and in general trading all the “gee ain’t it neat” animated nonsense for general accessibility improvements and simplification of the page.
That 134k total page size basically doing 40k’s job…
… yeah, not really worth changing everything, 90K is not very much in the grand scheme of things (its still in dev, so a lot of this is old css, script that I no longer need).
Divs are just easier to go back and re-use, I’m sure it could be done with a lot less, but I really dont have that much life to waste (today )
I’m redesigning it, but not throwing it all away (that green slidy thing its quite tacky though, I have to agree with that… its gone)
Hi richardbrown360. You haven’t really explained what your problem is. It might be best to start a new thread with a clear explanation of what you are attempting,preferably with a link to your site.
