Aspire Posted April 25, 2010 Report Share Posted April 25, 2010 I'm new to CSS and frustrated by what should be a simple image positioning. I hope someone can help me. (I'm tempted to go back to tables!) Using a Dreamweaver CSS template to start with, I have a header, left sidebar, main content and footer. twoColFixLtHdr.css The sidebar is not as high as the content and under it I want to put an image that sits tight against the footer. The content height will vary from page to page. The sidebar should sit at the top left under the header and the image should sit at the bottom left on top of the footer. Could someone please tell me how to do that? Quote Link to comment Share on other sites More sharing options...
Wickham Posted April 26, 2010 Report Share Posted April 26, 2010 Here's a very simple example:- http://www.wickham43.com/forumposts/aspire100426.html I haven't used your styles and I don't know what your markup is. My example puts a style of position: relative; in the footer style and then creates a class for the image .above { position: absolute; top: -90px; left: 0; } where the top size is the negative image height so that it sits just above the footer all the time. <div id="footer"> <img class="above" src="images/orangew90x90.jpg" alt="Orange W"> <p>Other Footer content</p> </div> I expect that there are several other ways to do it. Quote Link to comment Share on other sites More sharing options...
newseed Posted April 26, 2010 Report Share Posted April 26, 2010 (edited) I do not know what you html is like and I assume you mean you want the image to be above the footer ('top of the footer') but if you have a div that is containing the sidebar and content that you can simply add position: relative to that containing div and then apply position: abolute; bottom: 0 for image itself. Keep in mind that the image must be within that containing div just before the closing </div> for it to work. If you have the image located elsewhere within that containing div then you may have to add left: 0; to the css I provided earlier. Edited April 26, 2010 by newseed Quote Link to comment Share on other sites More sharing options...
BeeDev Posted April 26, 2010 Report Share Posted April 26, 2010 @newseed: I think his problem is more related to the sidebar div not stretching to the full height of the content area and not reaching the footer The only way I can see is to do it using absolute positioning on the image, and relative positioning on the footer as Wickham suggested: #footer { position: relative; } /* Set relative position so inside elements can be positioned relative to this element */ #footer img { position: absolute; top: -90px; } /* 90px or whatever the height of your image is */ Quote Link to comment Share on other sites More sharing options...
newseed Posted April 26, 2010 Report Share Posted April 26, 2010 I read as though he was merely stating that the sidebar is not as high as the content and so he wanted to use that space for the image. He didn't imply that he wanted the div to stretch down. Having a div wrapped around the sidebar and main content will work by applying what I suggested earlier. Nevertheless, I was not implying that Wickham's (or your) method was incorrect but instead I was just providing another alternative. Note: could the negative positioning work effectively if by chance the sidebar is longer than the main content? Quote Link to comment Share on other sites More sharing options...
Aspire Posted April 27, 2010 Author Report Share Posted April 27, 2010 Thanks, everybody. The absolute position and negative image height solved the problem. I never would have gotten that on my own. Now it's perfect. Wickham, thanks for posting the sample. Examining your code was a huge help. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.