4 replies [Last post]
sliceofthomas
sliceofthomas's picture
Offline
newbie
Last seen: 14 years 6 weeks ago
Timezone: GMT-4
Joined: 2007-09-23
Posts: 4
Points: 0

:curse:

Hi there,

I'm so unbelievably frustrated with this problem I can't even continue working on this site.

Here's my problem:

I'm trying to make two columns, one on the left for navigation and one on the right for main content. The left (nav) column is dark gray, and the main column is orange. I want the dark gray column to lengthen when more content goes into the orange column. Which is why I put everything in a container div with the same bgcolor as the dark gray column.

I've done sites like this before and not had a problem. Now, for some reason, my container div will not include the columns in firefox and there is some crazy space between the logo and the two columns in IE.

SOMEONE PLEASE HELP!

I hosted it if you'd like to see it live. View it in a few different browsers you'll see what I mean. I put the green border around the container so you could see more what I'm talking about.
www.snapmediaproductions.com/snap2

and here's the code:

SNAP Media Productions

thomas is testing a website.

thomas is testing a website.

thomas is testing a website.

thomas is testing a website.

thomas is testing a website.

thomas is testing a website.

thomas is testing a website.

thomas is testing a website.

thomas is testing a website.

thomas is testing a website.

thomas is testing a website.

thomas is testing a website.

thomas is testing a website.

thomas is testing a website.

thomas is testing a website.

thomas is testing a website.

thomas is testing a website.

thomas is testing a website.

thomas is testing a website.

 

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 11 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

You haven't enclosed your

You haven't enclosed your float elements. See enclosing float elements.

In this case, do

#container {overflow: hidden;}

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.

sliceofthomas
sliceofthomas's picture
Offline
newbie
Last seen: 14 years 6 weeks ago
Timezone: GMT-4
Joined: 2007-09-23
Posts: 4
Points: 0

Gary, I love you.

Your tip worked!

Now 2 questions though...

1.) Why has it worked before without the overflow property?
2.) Why is there about a 3 pixel gray line that separates my logo and the content block in IE?

Either way thanks again!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 11 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

sliceofthomas wrote:Your tip

sliceofthomas wrote:
Your tip worked!

Now 2 questions though...

1.) Why has it worked before without the overflow property?
Don't know. I'd have to see the code.

Quote:
2.) Why is there about a 3 pixel gray line that separates my logo and the content block in IE?

An image aligns itself to the anonymous inline box's baseline. That three px is the space below the baseline for letter descenders, i.e. qypgj. In Firefox, there was no text to establish the inline box, so no gap. IE always creates an inline box. Do #logo img {display: block;}.

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.

sliceofthomas
sliceofthomas's picture
Offline
newbie
Last seen: 14 years 6 weeks ago
Timezone: GMT-4
Joined: 2007-09-23
Posts: 4
Points: 0

Gary, you're my hero

Thank you so much.