CSS/DIV's behave like tables?

[mobius2000]

Hi everyone,

First off, thanks in advance to anyone who gives this problem a go, any assistance will be greatly appreciated.

I am making a complete DIV/CSS site, it's a pretty simple layout... Floated DIV on the right for main content with a left column DIV of the left. When my main content DIV (the floated one) exceeds the CSS determined height of the left static DIV, my left DIV doesn't continue down the page with the floated content. :eek:

This kind of process is simple in a tables based website however I can't seem to reach a compromise with the DIV's. I have read up on the "clear" function however can't seem to see how that works for this scenario.

If I am wrong and the clear function is what I need, could someone PLEASE post a little example just so I can get my head around it? Please!!! :)

[TheJoshMan]

without first seeing the page you are reffering to, it's hard to make a determination (for me it is anyway) on how to resolve this.

However, the first thing that comes to mind is...

Have you tried the "min-height" attribute?



<style type="text/css">
#leftcolumn{
min-height:100%;
}
</style>


Other than that, I'm not too sure without first seeing the problem first hand.

[mobius2000]

I'm sorry, you make a very good point about not being able to see a sample. I have attached a link to a mock up of the problem I am trying to fix.

I know I can make a background to achieve the solution however I was hoping there was a way that the markup can pull the red box down to the bottom to meet the end of the green box within this sample.

Link: Sample Link (http://www.midcomp.com.au/temprm/sample.html)

The CSS markup is contained with the source code of the sample page. Thank you for showing an interest in my issue, it is much appreciated. :)

[Medyman]

I'm sorry, you make a very good point about not being able to see a sample. I have attached a link to a mock up of the problem I am trying to fix.

I know I can make a background to achieve the solution however I was hoping there was a way that the markup can pull the red box down to the bottom to meet the end of the green box within this sample.

Link: Sample Link (http://www.midcomp.com.au/temprm/sample.html)

The CSS markup is contained with the source code of the sample page. Thank you for showing an interest in my issue, it is much appreciated. :)

From the sounds of it, this demo (http://visualbinary.net/files/tutorials/css-equal-height/) might be of help to you. Take a look at the source. This is the CSS technique I use to achieve equal height columns with CSS

[chas]

thats perfect !! explain how u did it without height?

is it the position:relative with an absolute?

[mobius2000]

That is exactly what I was looking for... Thank you sooooo much!

As mentioned by Chas, is the link between position:relative and position:absolute (on the right columns side) that achieves this?

Thank you again, very much appreciated.

[mobius2000]

Sorry for the delay in getting back on this issue, that option seems to work great in FF and is very easy to follow what is going on however it seems to float the whole lot to the right in IE7.

Does anyone else see that issue in IE7 using the sample link that Medyman so kindly provided?

I hope I have just screwed it up because it is a great fix.

[burginsteve]

I hope there's someone who can answer this last question!!!

[boogyman]

I suspect that has to do with the rendering engine.

Have you tested the look in other browsers? if they are okay in other browsers than you would need to do a separate IE mod to re-adjust the widths for IE only, however if other browsers aren't to your liking, than you can re-adjust all of them or just 2 (1 up 1 down) etc...

[Medyman]

Sorry for the delay in getting back on this issue, that option seems to work great in FF and is very easy to follow what is going on however it seems to float the whole lot to the right in IE7.

Whoa. What was I on when I coded that? My mistake guys. I flipped the position:relative and position:absolute divs.

Link updated. It should work fine in IE7 now. For IE6, follow this advice (http://www.brunildo.org/test/IE_raf3.html). I don't care enough about IE6 to fix my demo (read: I'm feeling lazy :p).


As mentioned by Chas, is the link between position:relative and position:absolute (on the right columns side) that achieves this?

Yup. What is happening is the right div supplies all of the colors for the background. The border is the exact width of the left div. Then, I'm just positioning the left div over border area of the right div. You could do this with negative margins, but that's messier (IMO).