Jump to content

Positioning Problem


cleibesouza
 Share

Recommended Posts

I'm a developer trying to transition from table based layouts to CSS based, so, no CSS guru here.My first attempt of a 100% CSS based site is here:The image on the left should be at the bottom aligned with the end of the content div and the bottom of the image should be sitting on the top of the footer.I have this working on the live version, but the css is a mess. I know I didn't code it right and wanted to redo it the right way to learn more about CSS. You can see how I'd like to have it here:Keep in mind that on the link above the background image is different (has the footer in it) from the other link Can you guys help me out?Thanks.

Link to comment
Share on other sites

If you want to have the object aligned with the bottom of the content box, there are many different ways to do it, this is just one of them:

  1. You'll have to put both that object and the content box inside another container (#wrapper, for example) that is set with position: relative.
  2. Give the content box a left margin equal to the width of the left column (the object that you wanted align with the bottom).
  3. Finally, you use position: absolute and set the bottom and left properties to 0.
  4. Optionally, you can give a min-height to the #wrapper element. It has to be at least as tall as the image you wanted to place next to the content box

Link to comment
Share on other sites

I used your idea of the absolute positioning since I already had a contentWrapper div and it works fine. Thanks a lot. Only two things now, not major but would be nice to have.1 - On IE 7 the left bottom image is showing behind the footer. I've added a z-index to the image, which works everywhere, but IE 7.2 - See the content's right border? The line doesn't go down all the way to the footer. I'm assuming it won't be possible to do, since it's the content's border and will go as far as the content. I've set a bottom padding and margin to zero, but doesn't work. Any ideas? Any other way to accomplish it?Thanks.

Link to comment
Share on other sites

First, remove "width: 100%" from #contentwrapper. It's causing some trouble.To solve the problem with the border not getting to the bottom, remove margin-bottom from #individual, and set bottom to -12px instead.Remove margin-left: -101px; from #individual and put left: 79px instead.Mixing margins with absolute positioning can give unexpected results, since technically the margins aren't actually supposed to do anything if the element is positioned outside of the page flow.As for the z-index problem, give #footer a z-index of -1 instead.

Edited by Ingolme
Link to comment
Share on other sites

z-index fixed. I didn't know we could set negative values to z-index. Always thought everything would be a 1 and anything above 1 would have priority. Cool.Border still doesn't reach footer despite all the fixes you advised me to do. But it's looking good. Pretty close to ideal.Like I said, I'm a developer and have been doing CSS for formatting but never for positioning. It's my first shot on a 100% CSS layout. Never thought would be that complicated. I've been reading about the 'box model' to try to learn as much as I can but there are so many exceptions/ways to manipulate it. Really complicated stuff. Thanks again for all the help.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...