cleibesouza Posted July 31, 2009 Share Posted July 31, 2009 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 More sharing options...
Ingolme Posted July 31, 2009 Share Posted July 31, 2009 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: You'll have to put both that object and the content box inside another container (#wrapper, for example) that is set with position: relative. Give the content box a left margin equal to the width of the left column (the object that you wanted align with the bottom). Finally, you use position: absolute and set the bottom and left properties to 0. 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 More sharing options...
cleibesouza Posted July 31, 2009 Author Share Posted July 31, 2009 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 More sharing options...
Ingolme Posted July 31, 2009 Share Posted July 31, 2009 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. Link to comment Share on other sites More sharing options...
cleibesouza Posted July 31, 2009 Author Share Posted July 31, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.