Probably bleeding obvious CSS issue that I can't fix

HTML & CSS
1

… cos I’m an idiot.

So, I’m just trying to make a simple template for a site I’m building for a charity. It just has a <header>, a <menubar>, and then a <main> content area with a <sidebar>. All this in a <wrapper> on top of a <background> div. Simple.

So why wont my chosen tone of silver-gray background color extend down the whole page?!! It only reaches down to the menubar and wont underlay the main content area although everything is inside the <background> div and it should stretch to fit, no?

I’ve hosted it here with all the content removed for ease of pointing out what fundamentally stupid mistake I’m making - please help!:

Untitled 1

2

Probably because you have floated elements in there.

try adding overflow: hidden; to the background rule.

.background {
…
overflow: hidden;
…
}

3

Just looked at your code and i have a question/suggestion:

Do you really mean to have the background wrap around the content area?
Would’nt it look nicer if you applied the background stuff to the page body?

4

As I suspected, I am an idiot! :blush:

Thanks zbing:


body {
background-colour:#EAEAEA;
}

…pride damaged, job done. (I’m still a novice - that’s my excuse and I’m sticking to it!)

5

^ There’s no u in background-colour.

CSS uses American spelling :slight_smile:

6

ah, yeah, I know - maybe I’m just a colonialist at heart :wink:

I’d typed the code up in my message rather than copy and paste, so don’t worry, it’s all good. No doubt there’ll be plenty of time for pulling hair over missing letters and punctuation as time goes by… :sick:

7

I’d recommend you get an editor that “knows” CSS and can point out to you when you’re making errors. For example I use NetBeans and if I type background-colour in there I get a yellow zigzag line under it (like Word does when you make errors) and when I hover it it says “Unknown property background-colour”.
Saves me a lot of time (and hair!) :slight_smile:

8

Thanks Scallio :slight_smile:
I’m using MS Sharepoint, which is pretty good for someone at my level and has the advantage of being free! The hair pulling moments come as it’s the 2007 edition, so doesn’t cotton on to some newer changes, plus I believe it carries over lots of IE glitches being from the same stable. It’s working for me for now though.
Thanks for the tip :slight_smile: