7 replies [Last post]
gary-e
Offline
newbie
United Kingdom
Last seen: 12 years 49 weeks ago
United Kingdom
Joined: 2007-04-21
Posts: 2
Points: 0

Hi guys, I'm new to the forum and so want to say hello first off!

Thanks for looking at my thread. I am hoping someone can help me out with this problem. It appears so simple yet I am struggling to figure it out.

Please take a look here:

http://www.jdmoney.com/gary/gary.html

The problem is; In Firefox the sidebar will display the page background after the text has finished. Instead I want it to display the same colour background all the way down to the same length as the main yellow content area.

The page displays just as I want it to in Internet Explorer 6.

Here's the involved CSS code:

body {
	background-color: #7B8425;
	background-image: url(images/background.gif);
	margin: 0px;
}

#container {
	width: 760px;
	background-color: #7B8425;
	margin: 0px auto;
	border: 0px;
}
#sidebar {
	padding-top: 30px;
	background-color: #7B8425;
	width: 135px;
	height: 100%;
	float: left;
	text-align: center;
}

#sidebar p {
	padding-top: 25px;
}	

#main {
	padding-top: 10px;
	background-color: #FFFF99;
	width: 625px;
	float: right;
}

#footer {
	width: 760px;
	background-color: #7B8425;
	clear: both;
	border: 0px;
	margin: 0px auto;
}

I was kind of hoping "height: 100%;" would have fixed it! But to no avail.

Can anyone offer any support?
Thank you in advance!

Warmly,
Gary

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 12 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Add overflow:hidden to

Add overflow:hidden to #container, and look up 'clearing float containers' for an understanding of whats happening, which is correct by the way, IE is actually breaking the rules in what it's doing.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 hours 17 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

You must enclose your float

You must enclose your float elements. Do this:

#container {
  overflow: hidden;
	width: 760px;
	background-color: #7B8425;
	margin: 0px auto;
	border: 0px;
}

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 12 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

so slooow

Smile so slooow

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 hours 17 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

Hugo wrote: so slooow Hah!

Hugo wrote:
Smile so slooow

Hah! You poſted at 2130 hrs and I, poſted at 1536 hrs, fully 5 hrs and 54 min earlier.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 12 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

damn these time zones

damn these time zones

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary-e
Offline
newbie
United Kingdom
Last seen: 12 years 49 weeks ago
United Kingdom
Joined: 2007-04-21
Posts: 2
Points: 0

Thank you Gary! I thought

Thank you Gary!

I thought it would be just one part I needed to add somewhere. Your help is much appreciated. And it is working beautifully now. Thanks again!

Warmly,
Gary

kk5st wrote:
You must enclose your float elements. Do this:
#container {
  overflow: hidden;
	width: 760px;
	background-color: #7B8425;
	margin: 0px auto;
	border: 0px;
}

cheers,

gary

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 12 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It was a pleasure

It was a pleasure Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me