Web Design Forums

Dirti · 14-03-2007, 15:53

I just started the basic structure for a template and ran into a little problem.

I positioned #content -130px relative so it over laps with #feat. This works fine but it leaves a 130px gap below it. How can i eliminate this gap?

All the CSS and XHTML is in this page:

http://nicholas-roberts.co.uk/ee_testing/index.html

skyrocket · 15-03-2007, 06:59

you'll need margin: 0 0 -130px 0 on the #content div - something to do with elements positioned relative taking up space in the flow of a document - like punching a hole in the page. sorry can't describe it better - need caffeine. the margin-bottom: -130px closes the hole back up

Dirti · 15-03-2007, 08:04

What browser were you using? -130px border for the bottom of #content doesn't seem to work in FireFox

Thanks.

skyrocket · 15-03-2007, 08:35

firefox 2.0

.sleep · 15-03-2007, 13:14

its margin, not border. i doubt you can have a negative border but you CAN have a negative margin.

Dirti · 15-03-2007, 14:35

Oops i meant margin.. thats what i have in my code and it still doesn't work:

updated:http://nicholas-roberts.co.uk/ee_testing/index.html

edit: ok i just fixed it, turns out i needed to add -130px margin to the html{} instead of #content

14-03-2007, 15:53	#1 (permalink)
Dirti Professional Idiot Join Date: Aug 2006 Location: Uk Posts: 59	CSS Positioning help I just started the basic structure for a template and ran into a little problem. I positioned #content -130px relative so it over laps with #feat. This works fine but it leaves a 130px gap below it. How can i eliminate this gap? All the CSS and XHTML is in this page: http://nicholas-roberts.co.uk/ee_testing/index.html

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

15-03-2007, 06:59	#2 (permalink)
skyrocket SkyRocket Design Join Date: Aug 2005 Location: Chichester Posts: 536	you'll need margin: 0 0 -130px 0 on the #content div - something to do with elements positioned relative taking up space in the flow of a document - like punching a hole in the page. sorry can't describe it better - need caffeine. the margin-bottom: -130px closes the hole back up

15-03-2007, 08:04	#3 (permalink)
Dirti Professional Idiot Join Date: Aug 2006 Location: Uk Posts: 59	What browser were you using? -130px border for the bottom of #content doesn't seem to work in FireFox Thanks.

15-03-2007, 08:35	#4 (permalink)
skyrocket SkyRocket Design Join Date: Aug 2005 Location: Chichester Posts: 536	firefox 2.0

15-03-2007, 13:14	#5 (permalink)
.sleep Senior Member Join Date: Mar 2007 Location: california Posts: 295	its margin, not border. i doubt you can have a negative border but you CAN have a negative margin.

15-03-2007, 14:35	#6 (permalink)
Dirti Professional Idiot Join Date: Aug 2006 Location: Uk Posts: 59	Oops i meant margin.. thats what i have in my code and it still doesn't work: updated:http://nicholas-roberts.co.uk/ee_testing/index.html edit: ok i just fixed it, turns out i needed to add -130px margin to the html{} instead of #content

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)