Positioning a div image at the bottom of right-floated div

Positioning a div image at the bottom of right-floated div (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility

Message

slappyJmarsden -> Positioning a div image at the bottom of right-floated div (4/20/2009 18:17:39)
here's is the page I am working on... http://www.kleenkuip.com/incite/default.html On the right side of the page there is a gradient png image that I need to position at the very bottom of the containing div. I have searched Google and tried some solutions but to no avail. Help appreciated.

Tailslide -> RE: Positioning a div image at the bottom of right-floated div (4/21/2009 1:52:34)
To position an image at the bottom right of a div you'd use: #container {background: url(images/sidebarR_grad.png) right bottom no-repeat;} You seem to have a div in there which doesn't do anything but hold this image? That's not necessarily a problem but may well be unecessary as you have lots of other divs in there such as the container that you could use.

slappyJmarsden -> RE: Positioning a div image at the bottom of right-floated div (4/21/2009 12:09:19)
Thank u Tailslide... The rightfloated div already has a background image so I used another div for the gradient image. Your code worked...thanks but I now have another issue... I use a main contaner then 2 floats right and left...in IE the content fills up the browser window like it should...in Firefox the left float (white color) is not stretching down to the bottom of the browser window... You'll notice in IE that I want to have a gradient div at the very bottom but it is not stretching over 100% of the browser window...weird because the div is placed just above the ending /body tag it doesn't even show up in Firefox. I think that maybe I am not using the clear property the correct way?

Tailslide -> RE: Positioning a div image at the bottom of right-floated div (4/22/2009 2:14:09)
In fact Firefox is doing it right - IE is doing it incorrectly. Because floats don't have much height as far as firefox is concerned the containing div only needs to be a couple of lines high so you don't get much background image. To cure it you can either use a clearing element - but it's bad form to do this with an empty element - if you see what I mean. The other way is to add "overflow:hidden" to the rule for the containing div. This will do what you want BUT can occasionally have side effects so double check it's all ok especially in older IE versions such as IE6.

slappyJmarsden -> RE: Positioning a div image at the bottom of right-floated div (4/22/2009 15:46:40)
I just tested this site in IE6 and it is a disaster...I dont' even know where to begin to fix it. :( I remember waaay back when I was learning table layouts and the pain in the butt cross browswer compatbility was. I am new to the css layout but this is a good learning experience.

Tailslide -> RE: Positioning a div image at the bottom of right-floated div (4/22/2009 16:31:41)
Yes it's all good fun! The trick is to keep things simple and valid - then it cuts down on the possible problems. Also good idea to check in all browsers as you go along. One of the main problems with IE6 and under is the double margin bug. Floated divs next to each other have their margins doubled and therefore it all breaks. Adding "display:inline" to the floated div rules usually helps this.

slappyJmarsden -> RE: Positioning a div image at the bottom of right-floated div (4/26/2009 13:56:53)
After much research I finally got my site working in IE6! But alas, now another problem is staring me in the face... I got the site to validate with no errors...but I just added a div (footerContainer) to my navigation structure at the very bottom. This displays as it should in IE6 and IE7 but I can't seem to get control of it in Firefox...even when I specify a border or background color IE6 and 7 display it as it should...Firefox displays NO changes whatsoever??? It has padding and left alignment attributes but then again Firefox is still ignoring them. The css validation is now giving me a parse error on the div#footerContainer I have never seen this before...any ideas?

Tailslide -> RE: Positioning a div image at the bottom of right-floated div (4/26/2009 15:54:36)
Not on the pc at the mo so can't check easily. What's the problem - FF and Opera etc not seeing the div? Is there anything in it or does it have a height set? If there's nothing in it and it has no height then it will be invisible. If the div is full of floats then you'll need to add overflow:hidden to it.

slappyJmarsden -> RE: Positioning a div image at the bottom of right-floated div (4/26/2009 18:02:15)
yes there is content inside the div...my bottom navigation is inside a #footerContainer div using <li>'s Fine in IE6, IE7 and even Opera displays it properly...Firefox is a no go. :( line 531 maincss.css Parse Error --> div#footerContainer

Tailslide -> RE: Positioning a div image at the bottom of right-floated div (4/27/2009 2:17:41)
I'd correct the coding errors and then FF might respond a bit better - it kept crashing when I was trying to look at the source! You've got <LI>s around block items such as headings which you can't do. Apart from that I couldn't find a rule for #navlist?

slappyJmarsden -> RE: Positioning a div image at the bottom of right-floated div (4/27/2009 14:36:36)
I took the contents of #footerContainer and put them into a new div called #navlist. Now FF displays the list correctly as I also took out the #footerContainer from the html...so the #footerContainer is still in the css file with no declarations but if I take it out of the css file FF goes back to not displaying the list properly. << did that make any sense? It has me shaking my head. It still hangs up on the validator even though #footerContainer has no set values and is completely removed from the html document. Why can't you put headings into li's? Everything else seems to run fine.

Tailslide -> RE: Positioning a div image at the bottom of right-floated div (4/28/2009 2:07:32)
You can't have block level items within an inline level item. In the link above you've got odd <li>s sprinkled in there with no <ul> around them etc. Get the code correct throughout the page and you stand a better chance of getting proper cross-browser compatibility (and probably more importantly future-browser compatibility). It's hard to problem solve the other issues when there's errors there - it masks solutions - if you see what I mean.

Page: [1]

Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI

0.09375