CSS positioning issue...

[TouCHiNG_CLoTH]

Hi everyone,

I was just wondering if anybody out there can help me with a problem I'm having with CSS positioning?

http://www.johnpaterson.org/test/index.html
http://www.johnpaterson.org/test/jpstyle1.css

Can anybody tell me why the light grey border at the bottom does not meet the rest of the site?

There is a big unwanted dark grey panel, this is not part of the website.

The site is just my experimentation with CSS positioning.

Cheers,
John :tu:

 

[Brian]

#textarea
{	
	height: 480px;
	width: 620px;
	background-color: #FFFFFF;
	position: relative;
	left: 100px;
	bottom: 480px;
}

problems arise with the 480px bottom, cause thats exactly how much space is between the two elements, don't have time to fiddle with it to get it working right now, cause i gotta go. Will take a shot at it when i get home, unless someone has already helped you out before then.

 

[Rowan W]

The links were pushing the content down. So how do you stop an element pushing another one? Float it over the top.

#links
{
	height: 480px;
	width: 100px;
	position: static;
	background-color: #CCCCCC;
float:left;
}

#textarea
{	
	height: 480px;
	width: 620px;
	background-color: #FFFFFF;
	position: relative;
	left: 100px;
}

I haven't checked this in IE yet so you'd better check.

 

[TouCHiNG_CLoTH]

Rowan, thanks very much for your input.

I figured out that the 'float: left; command was needed in the #links section. But that was not enough...

I had to include 'top: 0px;' in the #textarea section and I had to change the positioning of the links section from static to absolute in order for the page to work in both Firefox and IE5/6.

Thanks again Rowan, all is well now. Now to commence with my learning of CSS positioning..........well, after the snooker :hehe:

Cheers,
J :tu::tu::tu:

 

[df-sean]

Just in case you don't already know about it. There are lots of insanely useful CSS tutorials here:
http://www.alistapart.com

Here's a nice one for CSS layout ideas:
http://www.alistapart.com/articles/practicalcss/