as my content div heigh changes during the web browsing, i would like to make my left div (category menu) still reaching my footer div.
this is needed because my left div as for background-color a different color than the content one.
how can i do to make the left div everytime reaching the footer one even if my content div heigh is changing ?
It just simply uses a repeating BG image on the main wrapper. The image can be designed to do more than one column.
You can also do it by setting a BG color on the main wrapping div for the left and right columns as well as using a repeating image for one of the columns. When using this method the side columns are shifted out of the inner wrapping div with negative margins.
The expander links are just for demo purposes only
They are there to show you that all other columns expand along with whichever expander link you hover on.
They just simulate dynamic content being placed in the columns.
You can also see the columns expand by using “zoom text only”.
unfortunately while i was checking the code, the expanded link display a block of a fixed-height…in my case i do not know the height of the content div to which my left div must be aligned (in height) :sick:
I checked the code on http://www.pmob.co.uk/pob/equal-columns.htm without image.
it’s interesting but in my case it means to change my template from Joomla. as the floating div must be a child of the content div
so in my case the left div (where is the menu) should be a child of my content div (where is displayed all article and goods from my joomla website.
I’m glad you piped up- I don’t currently have any jump links on my site which explains my ignorance, but this is great to know. I’m quite new to this, but I like to do things the “right” way as much as possible. I guess I’ll changing my site to faux columns now It’s seems crazy that there’s no better way to do this!
The biggest problem with it is linking to anchors in elements within the containing block (using jump links within the page, also known as fragment identifiers).
positioniseverything.net
Linking to an anchor in any of the columns within the element that has been set to overflow: hidden causes the content of that column to shift upwards. In IE and Firefox, that is. View this test case in IE or FF and then view it in Opera. You will see that IE and FF no longer allow you to scroll back to the top of the page since the content shifted up.
If you are not planning on using any jump links then the method does work but that one bug is enough to cause most people to abandon the method altogether.
I recently solved this problem in a way that might work for you.
Set overflow:hidden on your containing div, then set the left column to padding-bottom:2000px; and margin-bottom:-2000px; This puts the bottom of the div where it would normally be and shouldn’t expand the container div. But it should extend the background image/background color far below the bottom of the container (to the footer div).
I’m fairly new to css, so forgive me if there is some flaw here. But this method seems to be working great for me.
as the floating div must be a child of the content div