Positioning problem

Hi, I have a problem where I have two divs where one sits on top of the other and as divs they sit fine, but as soon as I put content into the bottom div, it gets pushed to the side of of the top div rather than sitting behind within the lower div.

Why is this?

untitled-1.php

Basically, I am expecting the word 'image' to disappear behind the logo. It does the same whether it is text or an image!

Thanks

Mat

Just to clarify, I have now added a red placement image and want it to sit behind the logo and butt up to the left of the blue div.

I'm stumped as to why this is happening.

Thanks.

Mat

Hiya Mat,

That is the default behaviour of a div. What is it that you are trying to achieve? If you want the 'headerimage' div to contain an image, then you would set the background image to point to the one you want, i.e. in your screen.css stylesheet you would have:

#outerWrapper #header #headerimage {
	background-color: #66CCFF;
	height: 360px;
	width: 820px;
	background-image: url(path_to/your_image.jpg);
}

As a background image, it would not affect the positioning of any of the divs within the headerimage div.

If you wanted extra images or text to appear on top of that, you would need to add extra divs within the headerimage div - as you have with the logo div and the buckpanel divs.

Oh OK, I did try that but I thought it was a bit of a cheat and wasn't sure if it actually was css compliant.

OK, so from there then, I was hoping to have either a javascript based image slide show a bit like that from the plugin of Advanced Random Image, or even a flash based slide show.

Is it possible to do such a thing with a background property? Actually, is it possible to have a server side include as the background and that then hold the javascript for the slideshow?

Thanks

Mat

The header div usually contains a background image - nothing cheating about that - and supporting text or divs is commonly placed 'on top' of that (inside the header div). If having a background image in a header div were not w3c compliant, rather a lot of us would be up the creek without a stylesheet.

You can't set slideshow - flash or otherwise - as a background image. You would need to create a div within the header image to hold the slideshow.

You'd be best to create what you want for the header as far as possible as one background image - everything you have so far could be one background image (colour, logo, Buckingham) you could then easily create a div for your slide show without worrying about displacing those other divs.

You could certainly create a div in the header for a server-side include, but there wouldn't be much point if it were only appearing on that one page, and wasn't going to be changed often.

Probably the best idea would be to roughly mock up (in photoshop or other graphics software) what it is you want the header to look like so that we can help with the css.

I've basically ended up floating both the logo and the buckingham panel to the right which allowed the image area to rise to the position I need it in. I then had to give a right margin of 659 px to the logo and surprisingly, a left margin to the buckingham panel of 644 px which is odd as it was already floated to the right! Why that has happened and worked I have no idea.

Is this CSS compliant, or will it cause issues?

Strangely though, what I've done hasn't had any adverse affect on the navigation bar at the bottom of this image area.

Anyway, thank you for your efforts.

Nice one - it's looking good.

You have an extra </body> tag at around line 70 of your page which needs to be removed.

Looking great.