8 replies [Last post]
daniela
Offline
newbie
Last seen: 17 years 27 weeks ago
Joined: 2004-05-23
Posts: 7
Points: 0

Hi all,

This is my problem:

I have two divs, one is a coloured side-bar, and the other is a content div. Both are under a banner and over a bottom div. You can see this here: http://www.flashnews.ca/dani/index.html

Now, my problem is, on FF, I can actually get the side-bar to be somewhat long without text in it, but on IE it won't even go for longer than one line.

My objective is to get the side-bar to be as big as the content bar at all times, regardless of how much text is in either of them and regardless of what browser people are using.

Where did I go wrong?

If anybody can help that would be great!
Thanx a lot guys! Smile

GuyDavies
GuyDavies's picture
Offline
Enthusiast
Manchester, UK
Last seen: 12 years 23 weeks ago
Manchester, UK
Joined: 2004-09-11
Posts: 55
Points: 0

div height not working in IE - please help!

I am new to CSS myself but from what I have gathered could you not set the position of your header and footer using absolute positioning so that they always apear at the same part of the page and then use precentages for the heights of your side and content sections so that they always take up 100% of the space between your header and footer.

I am sorry I can only provide a theory but maybe a more experienced member can expand on this theory and provide a coded solution for it.

Laughing out loud

http//www.guydavies.eclipse.co.uk/

OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 17 years 18 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

div height not working in IE - please help!

What you could do is...

Make a 1px high picture of a 3-color strip, 143px wide, then add enough whitespace to the right of it so it's 800px wide. That should be the easy part, and can be done in Paint.

Then, in your CSS, do this:

#content {
width: 800px;
background: #FFF url(image here) repeat-y;
}

That should work. Not very pretty, but it works. I'm sure there are better ways. Laughing out loud

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!

daniela
Offline
newbie
Last seen: 17 years 27 weeks ago
Joined: 2004-05-23
Posts: 7
Points: 0

div height not working in IE - please help!

Good idea with the absolute positioning, but it has given me browser compatibility issues in the past so I tend to steer away from it nowadays... hehe

And the second idea, it's the faux-column design thing, eh? I would use that as a last resort... it's so time-consuming and leaves a nasty hack-taste... just wondering if anybody had a good CSS-like answer... guess tables still win on that one, eh?

Thanx for the help guys!! Smile

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

div height not working in IE - please help!

Daniela I was going to say that for starters you hadn't defined a height for the html/ body, height:100% won't work unless it has a something to calculate against otherwise it's a case of 100% of what; but the other problem is that you can't get an element to be more than the height of the viewport also in standards mode the default behaviour is auto; the height it needs to be, which is why the faux column technique that I mentioned on the other post is used but to call it a hack is wrong it is not a hack in the strict sense it is applying an image to div, a legit technique; a hack is when you find bugs in the spec and use it to produce a desired effect such as * html #foo {}.
You seem to have sorted it out now though although I noticed that your page has no DTD so is in quirks mode which becomes a pain to help with as it's hard to know how each browsers will render the code.
Hugo.

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

daniela
Offline
newbie
Last seen: 17 years 27 weeks ago
Joined: 2004-05-23
Posts: 7
Points: 0

div height not working in IE - please help!

Hi Hugo,

That's why I said hack-taste... it just feels like a hack to me because it's a work-around... you know what I mean? Sorry if my terminology isn't right... :oops:

And thanx for the heads up on the height things... I didn't know I had to set body/html to height: 100% too.

Finally, I didn't put the DTD yet because it is far from a final version of the page! I tend to put the DTD early, but this was so much of a rough draft I didn't even bother...

Anyway, thanx again! Smile

- Daniela

daniela
Offline
newbie
Last seen: 17 years 27 weeks ago
Joined: 2004-05-23
Posts: 7
Points: 0

div height not working in IE - please help!

and for the record... I just added <p>&nbsp;</p>'s to the bottom of my sidebar until it got as long as I wanted it to be... Smile

nickelsto
nickelsto's picture
Offline
Regular
Last seen: 14 years 15 weeks ago
Timezone: GMT-8
Joined: 2004-09-12
Posts: 26
Points: 0

div height not working in IE - please help!

Daniela,

I am having the same issue as you are, and will end up doing the same, by filling in the container with <br>s or <p>&nbsp;</p>s. http://renaissanceguitars.com/draft/website/Pricelistframe.html

The way IE handles CSS compared to the other browser's is frustrating. In netscape the left nav is fixed, as it should be, but the links and anchor's don't want to work. On the other hand, in IE the links work but the "position:fixed" doesn't.

I am trying to learn CSS as fast as I can because I think that it is great compared to tables. But I didn't realize there were so many browser issues.

OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 17 years 18 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

div height not working in IE - please help!

I still think the faux column layout would be the easiest. It is automatically resized according to the height of the content, and there's no messy non-breaking spaces in a column.

Your choice, however.

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!