CSS layout question 77 Responses

Last post: 2 years, 6 months ago | Thread started: Jul 26, 09, 7:59 p.m.

RespondNew TopicDisable Images

• blaw

  As shown below, I have a two column layout with an irregular-shaped image that must be positioned flush with the page bottom and overlaying the right column.

  I've set the z-index to 1, which accomplished the overlay, but I cannot seem to get it flush with the bottom.

  Thoughts?

  

  Jul 26, 09, 7:59 p.m. – Permalink

• iamaracinghorse

  How is the element positioned? Absolute?

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earJul 26, 09, 8:06 p.m. – Permalink

• search

  .object{
  top-margin: -22px;
  }

  • *margin-top: -22px;– search

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earJul 26, 09, 8:07 p.m. – Permalink

• blaw

  If I use:

  position: absolute;
  left: auto;
  bottom: 0;
  z-index: 1;

  ...it positions the image at the bottom of the available browser space, but I need to accommodate for when the page is longer than that. I need it at the bottom of, say, the body or html object.

  • If I use position: relative then it places the image below everything, without the overlay effect.– blaw

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earJul 26, 09, 8:19 p.m. – Permalink

• search

  http://ryanfait.com/sticky-foote…

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earJul 26, 09, 8:32 p.m. – Permalink

• blaw

  @search—that looks exactly right. I'll give it a run in the morning, but at first glance it looks like the solution. The piece I'd been overlooking is the negative margin on the 'wrapper'.

  Thanks a lot!

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earJul 26, 09, 8:40 p.m. – Permalink

• Stugoo

  i have a few ideas how i would do this. post a solution when you got it mang!

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earJul 27, 09, 1:41 a.m. – Permalink

• monoboy

  Could give the star image an ID and position it relatively?

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earJul 27, 09, 1:57 a.m. – Permalink