Div stretch to bottom in IE6

[Aso]

A div with styles;

Code: Select all

width: 23px;
position: absolute;
left: 28px;
top: 267px;
bottom: 0;

works great in FF, IE7 and Opera. The div is basically a 'post' that starts 267px from the top and stretches to the bottom of the page (using bottom: 0)

However, the success is not the same in IE6. I've tried height: 100% with a top margin but get the same results. The post won't stretch unless I give it a height value in px or similar (which of course will become too short or too long in a different screen res). Any clues?

Many thanks

Alex

[JustinStudios]

I've got the same issue with a site I am working on too. A visual of the problem can be seen at www.justudios.com/Taneya . Only a problem in IE6. If I can find a solution to this problem I will post back, if not and someone else can help us that'd be wonderful too. Thanks!

[Stuart]

Hmm... A lot of people seem to have this problem, huh? The solution is to use Faux Columns...

[Lchad]

Try adding 100% height to the body.

Code: Select all

body { 
 margin:0; 
 padding:0; 
 height:100%; 
}

Then add height:100% also to the div that you showed in your post Alex:

Code: Select all

width: 23px;
position: absolute;
left: 28px;
top: 267px;
bottom: 0;
height: 100%;
}

I might be off, but in search the net for the answer, the 100% of the div
will not work because it's 100% of nothing. But by adding the 100%
to the body tag, it will probably work.
Crossing finger.

[Monie]

HTML: Select all

width: 23px;
position: absolute;
left: 28px;
top: 267px;
bottom: 0;
height: 100%;

I tried with this css (like Lchad suggested), and it work's fine in both FF and IE7.

[JustinStudios]

I tried using the height: 100% option and works fine in IE6, but doesn't do anything for me in FF or IE7. As for Faux Columns, I get what that guy is saying but in my case it wouldn't do me any good because it can only be used in set layouts and my design is fluid. So I had to figure something else out... Then it hit me... Spacer images. Yes, I know spacer images aren't the best solution, but it is an easy fix. The spacer image can be 1px in width and be as long as you need it to be. This will make the column be the size you need it to be.

If your text is dynamic then this is where we have a problem.

I'm still looking for a better solution but haven't found anything so far as easy to use, or as versatile as a spacer image.

Faux columns aren't a bad idea I guess, but they do limit you to a specific design type.

[Monie]

That's weired! My IE7 and FF behave nicely!

[JustinStudios]

Ok, I found out why mine doesn't work in IE7/FF I don't use positioning. My sites a fluid layout, and therefore its all setup based on divs and floats.

When I used positioning this fixed, but of course I can't use it.

I also found that if you have more text then 100% screen size Example - you have to scroll down to read, the 100% height fix doesn't work anymore. One column expands to fit the content, whilst the other stays at the 100% height line.

[Stuart]

Yes, css becomes tricky when you use fluid layouts...
I haven't some across any fixes for "filling the column", but I think padding is better than a spacer!

[JustinStudios]

The reason you can't use padding is because your content is different lengths on each page. So you'd have to have a different style sheet for each page, or, dare I say, inline styles (There goes the validation).

With a spacer your not adding any code and not doing anything wrong by validation rules. Now SEO you might take a hit, but I doubt it could be that bad.

[Stuart]

Oh, ok. I see what you're saying now (my brain wasn't working...)

[MikeHopley]

If you want equal-height columns, the obvious solution is "display: table-cell".

[Aso]

Lchad, you're a legend I can't believe how simple that was!

[Lchad]

I learned something new too! Glad it worked!

[JustinStudios]

Hrmm, Mike can you explain the table-cell more. I'm doing google searches atm but haven't come across anything too creative yet. I've also been toying around with the coding to fix this. My problem is I'm using a fluid layout, positioning is a no go for me. Well, I dont use positioning on hardly any of my layouts, even static, but that's because I was taught to steer clear of them unless you got into a situation where it was absolutely the last resort.

[karinne]

Originally Posted by JustinStudios

Hrmm, Mike can you explain the table-cell more. I'm doing google searches atm but haven't come across anything too creative yet. I've also been toying around with the coding to fix this. My problem is I'm using a fluid layout, positioning is a no go for me. Well, I dont use positioning on hardly any of my layouts, even static, but that's because I was taught to steer clear of them unless you got into a situation where it was absolutely the last resort.

See this thread - CSS - dynamic height div

[MikeHopley]

"display: table-cell" is not positioning. Positioning is setting "position: relative/absolute/fixed".

It simply works as a table would. Why spend all this effort to replicate table designs with floats, when you can use a <div> as a <table>? (And you can still use floats inside the "table".)

The downside is that IE doesn't support it, but this can be fixed with a javascript hack for IE (see the other thread).