Div in lower left corner of wrapper div

Question

Hello!

I have a page with a wrapper div which contains a background image and all the content divs. In this wrapper div I also have a logo div which should be placed at the bottom left corner of the wrapper without interfering with the contents.

I have managed to place the logo in the bottom left corner of the whole page (position: absolute; bottom: 0; left: 0;) The problem is that if you resize the width of the window, the background stays centered while the logo div goes left and sticks to the browser edge (as it should).

How would I go about making it stay to the edge of the wrapper div? The reason it is not a part of the background is that the client wanted to be able to change the background without editing in the logo. I have thought about not centering the wrapper, this would solve the problem. I'm thinking about position: relative, but it doesn't seem to work.

I hope I'm clear enough, here is a link to the layout in case it helps. http://development.pulsemedia.se/current/kingromeo/layout/

Answer 1

Make your wrapper div's position to be relative.

Answer 2

At the moment, your bandname div is not inside the wrapper. Put it in the #wrapper div, and set the wrapper to a position: relative;

Answer 3

Put the logo div inside the wrapper div, and then set use some combination of these:

position: relative; bottom: 0px; float: bottom;

I'm not sure about the float: bottom, but I think you'll need it to prevent interference with the rest of your content.

Answer 4

I found my mistake. I had forgot to make the background-div fixed width so when the browser windows expanded, the background-div expanded too. Everything was behaving exactly as it should.