I need to figure out how to position the firetruck in the bottom left hand corner of this page. I know basic css, but positioning is something I have done pretty much none of. I also understand that it might be difficult to do this so that it works without the text going under the image. Could someone make a recommendation on how I might do this?
I would really appreciate it!!!
Thanks so much for the posts - I used the last 2 suggestions (changed span to div) and that worked and was easy for me to figure out!!! - thank you sooooo much!!!
This is what it looks like now:
http://memoriesdesign.com/npfd/index.html
Guys you’re wonderful!!!
Dawn
Why use a span and then convert it to a pseudo-div with display:block;
Why not just use a div to begin with. The only time you need to use an AP span is when it is nested in an inline element such as an anchor.
What you proposed is essentially the same thing I did in my last post. 
Dawn,
Do you have the PSD source file, that is can you isolate the firetruck with a transparent bg? if so, then why not make a <span id=“truck”>, display block, AP, give it the height and width of the firetruck, and put it within the div that contains" 108 second street", make THAT div relative. and it should work fine. the down fall is you really cant use a JPG, and you have to pad the bottom of your content area to allow for the truck… Ah, the joy of web design, no?
to see what I mean look at my page:http://raym31.home.comcast.net
If you absolute position (AP) the truck image as I am doing in this example the thing you need to do is set position:relative; on the parent of the truck div. That will establish the containing block and then all AP children will position from the parent.
Here is a Rough Example of your page with the AP div at the bottom left. You can set the image as a BG image. I set it up as a Sticky Footer layout which keeps it at min-height:100% when content is minimal. In this case the parent of the #truck div is the #wrapper and I have set position:relative; on it so the truck div will position from the wrapper.
I have a bottom padding set on the inner div to protect the footer but it will need bottom padding set on the future left column to keep text out of the truck image.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>New Philidelphia Fire Department</title>
<style type="text/css">
html,body {height:100%; }
body {
margin:0;
padding:0;
font:100%/1.3 arial,helvetica,sans-serif;
background:#FFF;
}
#wrapper {
width:950px;
margin:0 auto;
min-height:100%;
background:#8C1C11;
position:relative;/*containing block for AP children*/
}
* html #wrapper {height:100%;}
#header {
height:200px;
background:#712116;
overflow:hidden;
}
#header h1 {
float:right;
margin:100px 20px 0 0;
padding:10px;
font-size:24px;
text-align:center;
background:#222;
color:#FFF;
}
p.serve {
margin:0;
height:40px;
line-height:40px;
letter-spacing:4px;
text-transform:uppercase;
text-align:center;
font-weight:bold;
color:#FFF;
background:#000;
}
#inner {
width:100%;/*IE6/7 haslayout*/
padding:0 0 70px 0;/*stop text from sliding under footer with bottom padding*/
}
#inner p {
margin:1em 1em 0;
padding:.15em .25em;
color:#FFF;
}
#truck {
position:absolute;
z-index:2;
left:0;
bottom:0;
width:200px;
height:200px;
background:red;
opacity:.5;
}
/*==== Sticky Footer Styles ====*/
#footer {
width:950px;
height:55px;/* a sticky footer needs a fixed height to work properly*/
margin:-65px auto 0;/*lift the footer into the vieport*/
background:#DE4838;
overflow:hidden;
position:relative;/*auto stack above #wrapper*/
z-index:1;
}
#footer p {
height:45px;
line-height:45px;
margin:0;
padding:0;
font-weight:bold;
text-align:center;
color:#FFF;
background:#000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<p class="serve">Serving New Philidelphia Since 1859</p>
<h1>New Philidelphia Fire Department</h1>
</div>
<div id="inner">
<p>This method pulls the footer into the vieport (on top of the wrapper) with a negative top margin on the footer.</p>
<p>Then an inner div with bottom padding is nested in the #wrapper to prevent text from sliding under the footer.</p>
<p>No IE8 or Opera bug fixes are being used at this point. The page should render fine in IE6/7 and FF.</p>
<p>Lorem ipsum dolor sit amet consectetuer et Nullam fames Sed amet. At lacinia et sed leo mus
a eros tristique urna convallis. Lobortis euismod laoreet lorem nulla id Curabitur et feugiat
pulvinar id. Magna Nunc tortor in habitasse malesuada tellus laoreet ipsum adipiscing condimentum.
Pretium condimentum dolor vel habitant lacus amet tempus sem Donec.</p>
</div>
<div id="truck">
<p>Fire Truck BG Image</p>
</div>
</div>
<div id="footer">
<p>Sticky Footer</p>
</div>
</body>
</html>
I’m still struggling with this one - any suggestions? It would seem that I have to take a div and place it in the bottom left hand corner on top of everything else, but since positioning is not my thing, I’m not sure where to go with this.
Thanks,
dawn
Hi Dawn,
Sorry I got tied up with some other stuff earlier.
Yes, you will need to position a div in the lower left corner. There are two different ways to do it.
You can absolute position it or you can lift it up over the footer with a negative top margin.
Let me see if I can put an example together for you and I will post back.
I am assuming that the text should end in the content area with the rounded corners shoving the truck image down?
Dawn
That’s what I would suggest. Unless you want to make it complicated. Only because without text to the right of the truck, it looks screwy – too much white space that looks like it should be filled.
Personally, I would stack divs. You could try absolute positioning, but I don’t think that would work so well in this case. Just thinking out-loud 
You could make an outer div with the truck as the bg, with enough padding to acommodate the image, and then make an inner div the the actual text. Although, now that I’m typing this I realize that you don’t need an inner div – just set the background and add the padding.
Well there are several things to consider here.
Will the text need to wrap around the truck image?
Are there pages without the truck that need to have a round corner at the bottom left? (it is hidden behind the truck now but if the truck is not there it would need to match the round corner on the right)
The answer to those questions will determine whether or not the truck needs to be an independent png image with a transparent background.
I’m on my way out the door right now. The best thing you can do at this point is to get a live test page set up with all the other images so we can have something to work with.
I need to figure out how to position the firetruck in the bottom left hand corner of this page.
Hi Dawn, Welcome to SitePoint
It looks like you forgot to give us the link to the page.