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

	Home Register Search Help Login

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Sponsors
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

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

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Positioning a div image at the bottom of right-floated div

Page: [1]


slappyJmarsden Posts: 55 Joined: 3/13/2003 Status: offline	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. < Message edited by slappyJmarsden -- 4/20/2009 21:34:14 >


Tailslide Posts: 6691 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: Positioning a div image at the bottom of right-floa... - 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. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to slappyJmarsden)


slappyJmarsden Posts: 55 Joined: 3/13/2003 Status: offline	RE: Positioning a div image at the bottom of right-floa... - 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? (in reply to Tailslide)


Tailslide Posts: 6691 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: Positioning a div image at the bottom of right-floa... - 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. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to slappyJmarsden)


slappyJmarsden Posts: 55 Joined: 3/13/2003 Status: offline	RE: Positioning a div image at the bottom of right-floa... - 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. < Message edited by slappyJmarsden -- 4/22/2009 15:57:48 > (in reply to Tailslide)


Tailslide Posts: 6691 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: Positioning a div image at the bottom of right-floa... - 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. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to slappyJmarsden)


slappyJmarsden Posts: 55 Joined: 3/13/2003 Status: offline	RE: Positioning a div image at the bottom of right-floa... - 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? (in reply to Tailslide)


Tailslide Posts: 6691 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: Positioning a div image at the bottom of right-floa... - 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. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to slappyJmarsden)


slappyJmarsden Posts: 55 Joined: 3/13/2003 Status: offline	RE: Positioning a div image at the bottom of right-floa... - 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 (in reply to Tailslide)


Tailslide Posts: 6691 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: Positioning a div image at the bottom of right-floa... - 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? _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to slappyJmarsden)


slappyJmarsden Posts: 55 Joined: 3/13/2003 Status: offline	RE: Positioning a div image at the bottom of right-floa... - 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. (in reply to Tailslide)


Tailslide Posts: 6691 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: Positioning a div image at the bottom of right-floa... - 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. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to slappyJmarsden)

Page: [1]

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Positioning a div image at the bottom of right-floated div

Page: [1]

Jump to: 1

New Messages	No New Messages
Hot Topic w/ New Messages	Hot Topic w/o New Messages
Locked w/ New Messages	Locked w/o New Messages

Post New Thread

Reply to Message

Post New Poll

Submit Vote

Delete My Own Post

Delete My Own Thread

Rate Posts