Div - Image - Floating Issue

[Matt Geer]

Hey Everyone-

Im designing/coding a new template for my site and have started the coding process and have run into a snag.

What I am trying to do is code my footer using a<div> and am trying to float my logo to the right of the footer at a fixed location.

The problem that I am running into is that the image wants to say within the <div> and will not float above it like I would like it to. I have tried coding the images as a <div id>, <div class>, and just have coded it as an image within the footer that needs to float right...all have kept the image within the footer which is what I do not want. Also, the way the logo is sitting it has created a margin between my wrap and my body-bg that shouldn't be there either.

Below is my coding and images what I have and what I would like it to look like-

Any thoughts or suggestions?

(FWIW, I did originally crop the whole bottom of the page as the footer to avoid this problem but then the background/stripes didn't line up and looked pretty bad)

CSS:

#footer {
background: url(images/footer.gif);
background-repeat: no-repeat;
width: 920px;
height: 60px;
margin: 20px 0px 0px 5px;
}

img {
float: right;
}

HTML:

<div id="footer"><img src="images/logo1.png"></div>

Thanks!

[sirtiner]

You can do a

position:relative;
bottom:add whatever px;
left:add whatever px;

on your img

[Matt Geer]

Thanks- that pretty much did the trick..that was too easy in fact and I spent alot of time trying to find the answer first

I did have to take the image out of the footer <div> in my html as it was messing w/my links on the bottom, but other than that it worked like a charm-

My only issue now and one I can live with if I have too is the image seemed to create a 100px or so gap/margin at the bottom of my page, it's like the one I showed in the pic in my OP but much bigger- I tried to upload a pic but didn't work. I did try to remedy this by taking my bottom margin on my wrap all the way to 0, but it only helped a little- here is my CSS code so far

(Im self-teaching myself, so please bear with me if something is obv F'd up )

But any thoughts on how to correct the margin issue? Thanks again for the previous help-

 /************************ BODY-WRAP *******************/

body {
	background: #454545;
	margin: 0px auto 0px;
	padding: 0px 0px 0px 0px;
	font-family: Arial;
	font-size: 14px;
	line-height: 18px;
	
}

p {
	padding: 3px 5px 0px 5px;
}

#wrap {
	background: url(images/bg.gif);
	background-repeat: repeat-y;
	margin: 0px 0px 0px 0px;
	padding: 45px 45px 0px 35px;
}

#header {
	background: url(images/header.jpg) bottom;
	background-repeat: no-repeat;
	width: 920px;
	height: 184px;
	margin: 0px 0px 0px 0px;
}

/************************** NAVBAR **************************/

#nav	{
	background: url(images/nav.gif) top;
	background-repeat: no-repeat;
	width: 920px;
	height: 60px;
	margin: 0px auto;
	list-style: none;
}

#nav li, a {
	float: left;
	font-size: 16px;
	color: #ffffff;
	text-decoration: none;
	margin: 10px 0px 0px 15px;
}

#nav a:hover {
	color: #800000;
}

/************************** CONTENT ************************/

#container {
	background:#ffffff;
	width: 900px;
	margin: 20px 0px 0px 5px;
	padding: 0px 0px 0px 0px;
	border: #000000 solid 5px;
}

/************************* FOOTER ************************/


#footer {
	background: url(images/footer.gif);
	background-repeat: no-repeat;
	width: 920px;
	height: 60px;
	margin: 20px 0px 0px 5px;
}

#footer li, a {
	float: left;
	font-size: 15px;
	color: #ffffff;
	text-decoration: none;
	list-style: none;
	margin: 10px 0px 0px 15px;
}


img {
	position: relative;
	bottom: 82px;
	left: 813px;
}

[sirtiner]

Forgott to say that you should have it like this:

#footer img {
position: relative;
bottom: 82px;
left: 813px;
}

otherwise it will effect every image on your site
you might wanna have
img {
float:left;
border:0;
}
or something.

You can add me on MSN if you want and i could help you tomorrow, need to sleep now

[Matt Geer]

ok, will give that a shot- thanks!

Edit: Will add you to MSN tomorrow and touch base w/you tomorrow/Sunday if that works - I really apprecitate it!