div child problem

[matty10209]

hi guys, im new to this forum

im currently in the process of creating a website for youths which will contain updated information of the nightlife in a part of kent and so far i have stumbled upon what is presumably a very easily solved problem.

to make a long story short, i have two div tags. one centered in the middle with <b>margins</b> with no positioning rule assigned to it, and a quick logo i made in photoshop which i have set to <b>fixed positioning</b> somewhere in the bottom left corner of the page.

the desired effect i wish to create is for the logo to stay on the bottom left hand side of the page <b><u>underneath</b></u> the main body div. When i enter the body div as a child of the logo div, it inherits its fixed position and goes off-screen. when the logo is a child of the main body div, it appears in front of the main body, i want the logo to appear underneath. here is the code for both the main body and logo, including css.

<div id="main_body">
	<div id="logo">
	</div>
</div>


}#logo {
	background-image: url(Images/What&#37;27s%20Important%20Logo.png);
	height: 291px;
	width: 197px;
	position: fixed;
	left: 15px;
	bottom: 15px;
	visibility: inherit;
}
#main_body {
	background-color: #FFF;
	height: 815px;
	width: 700px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	border-right-width: 3px;
	border-bottom-width: 3px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #669999;
	border-bottom-color: #669999;
}

[PeejAvery]

What you need to do is set it as the background image and also position it using the CSS background properties.

If your page has no image (only a color) set as the bodys background, use the following. If you do have an image, then you will have to implement this for a <div> that coves the whole page. And then put all content in that <div>.

body {background: #ffffff url(Images/What%27s%20Important%20Logo.png) bottom right;}

[Bill Crawley]

Another way if I understand is:

in the main Div Set it's style Position:Static.
Then create a new div below the main div and then Do Something Like:

<div style="float:left; position:relative;">

This should force the second div to align from the left of the page and below the main div. You can then play with things like Margins and borders to get the correct spacing etc.