CSS positioning issue...

TouCHiNG_CLoTH · May 1, 2005

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 · May 1, 2005

Code:

#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 · May 2, 2005

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

Code:

#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 · May 2, 2005

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 · May 4, 2005

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/

CSS positioning issue...

New Member

VIP Member

Established Member

New Member

Established Member

Visit.co

Reslink.com

Stellar.co

GovST.com

Tourneys.com

Unsociable.com

Developmental.com

Overlay.co

TheGoodNews.com

Open.House

Similar threads

We're social

Visit.co

Reslink.com

Stellar.co

GovST.com

Tourneys.com

Unsociable.com

Developmental.com

Overlay.co

TheGoodNews.com

Open.House

Pinned

Appreciation

Preference

Appreciation

Upvoting

Agreement

Answers

Decisions

Relevance

Reaction

Facial expressions

Vocal expressions

Status

Workflow

Clarification

Feeling

Sympathy