CSS problem..probably simple for somebody smart!

[sharonjackson]

I am developing a website using a Dreamweaver template- 2 column fixed width. At the bottom of each page I want a graphic on the left.

Building Design - Unique Home Designs - Duncan - Vancouver Island BC

I can place it there, but it leaves a large white space to the right of it where the content cannot go. I tried putting the <div> right after the container tag, but it makes the graphic stay at the top and bumps the sidenav div over. Here is the code that does not work:

.twoColFixRtHdr #hand {
float: left; /* since this element is floated, a width must be given */
width: 156px;
height:258px;
background: #ffffff;
background-image:url(images/interface/lower_left_hand.jpg);
background-repeat:no-repeat;
z-index:100;
position:relative;
left:-200px;
}

This is what it is supposed to look like:



I could do this with my eyes closed using tables and I am about to throw in the towel, but will keep at it if someone can help me!!

Thank you so much

[Uncle Dog]

Quick look at your page source I'd say you should put the hand div inside the sidebar div. Don't worry about floating it, just position it.

[sharonjackson]

I tried that, Uncle Dog, but if I have a page that has a lot of content, the hand graphic would stay at the bottom of the side nav links and the content would continue on down, leaving the graphic hanging on the left in the middle someplace rather than at the bottom.

Any other thoughts? Other than never putting a graphic on the bottom again????

[Uncle Dog]

Try a negative top value to pull it upwards?

[sharonjackson]

Nope...alas, that did not work either. I tried putting it back in the side nav div and giving it a negative number, but it is still too absolute. If I have a lot of content, it will only go as far as the side nav and not all the way to the bottom of the page. I should check out zengarden.com and see if I can find a solution there. I cannot afford to spend a lot of time on this, though, he is in a hurry and I am thinking I am going to throw in the towel and go to tables.

[Uncle Dog]

Got it.
Put the hand div immediately before the footer div. Then give the hand div a top:-220px ish value. Adjust to suit. It rides up and down with the footer.

[sharonjackson]

Just as you sent this I had tried putting the hand div right IN the footer div

.twoColFixRtHdr #hand {
float: left; /* since this element is floated, a width must be given */
width: 156px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
height:258px;
background: #ffffff; /* the background color will be displayed for the length of the content in the column, but no further */
background-image:url(images/interface/lower_left_hand.jpg);
background-repeat:no-repeat;
position: relative;
bottom: 212px;
z-index: 100;
}


and it works! Thank you so much for working with me on this one. What a little bugger it was!! Having someone work with me on it made all the difference.

That website by the way is www.csszengarden. It has some very cool stuff on it. There are a bunch of sites down the right hand side that all have the same content, but show you all the stuff css can do.

[Uncle Dog]

No problem. Good night.

[danlefree]

... and then there's the option to set the hand image as the page background with lower-left alignment

[weegillis]

The sad truth is that the lower left and lower right corners are impossible to position without some strain and a little weirdness in two column layouts without tables. The left column is essentially the wrapper layer with width restrictions on its content (navbar, etc.) and the right is floated left with a margin ~+10px of the used width of the left side. Then the image is absolutely positioned in the wrapper layer, as well, pinned to the bottom. Now the footer is put in the wrapper with the same margin as the content and all is well.

[agrable]

Since you've created a div on the left side, why not just fill up the remaining space on the right by creating a div on the right?