Hi gyes,

 

I was just thinking of a two or three column layout having background colors. and I need the three panels height to be same.

Presently I do this by applying a javascript which forces the panels to be same by identifying them with their ID.

 

But what i want to know is, wheather its possible to do it only using CSS without any javascript ?? As I tried this but ended up with no positive results.

 

I would look forward for you suggessions

There is a method called Faux columns. http://www.alistapart.com/articles/fauxcolumns/

 

I think this will do what you want

There is a method called Faux columns. http://www.alistapart.com/articles/fauxcolumns/

 

I think this will do what you want

 

Thanks for your quick reply I would check out this and let you know about my conclusion.

Hey Eris,

 

I had gone through this article but its actually not a good process as they are just creating an illusion by repeating the backgroung image in the main container.

 

I need the DIVs to extend to the maximum height so that we can handle it easily.

 

I think we need to do a bit RND on it, once I reade in an article that ita can be done by using the clear property of CSS. But I think I didn't used it as it was not cross browser supported.

 

If you have any more Ideas regarding this then you can share it..

 

Thanks..

Is this of any help?

 

http://www.search-this.com/2007/02/26/how-...columns-in-css/

Is this of any help?

 

http://www.search-this.com/2007/02/26/how-...columns-in-css/

 

Thanks your support I will check it thoroughly later as I dont have time right now and let you know.

Is this of any help?

 

http://www.search-this.com/2007/02/26/how-...columns-in-css/

 

Hey Mike,

Sorry I was late to look at this..

I liked it and worked on this to implement but still there is a problem in IE 6 and also not so flexible to use..

 

Thanks once again for you response.

 

Any Other Suggessions ??

I'm fairly sure that this works...

 

div{
height:100%;
display:block;
}

 

...but I'm not 100% sure how "display:block" works, and whether it would affect your layout in other ways.

I'm fairly sure that this works...

 

div{
height:100%;
display:block;
}

 

...but I'm not 100% sure how "display:block" works, and whether it would affect your layout in other ways.

 

Actually I would like to mention you that DIV is a block element.

So, we don't need to make it display:block; through CSS

 

We use this display:block; property of CSS just to make the Inline elements to behave as a Block element.

We use this display:block; property of CSS just to make the Inline elements to behave as a Block element.

 

 

1st height:100%; dosent work for the 1st child DIV on a page, also display: block; seperates Inline elements, useful for creating buttons etc for navigation purpouses.

1st height:100%; dosent work for the 1st child DIV on a page, also display: block; seperates Inline elements, useful for creating buttons etc for navigation purpouses.

 

Height:100%; << This actually does not work at all for DIV elements untill an unless its position is set to absolute ( position:absolute; ) with respect to a wrapper whose position is relative ( position:relative; ).

 

display:block; << This is not only used for creating butttons and navigations, above I have mentioned its main purpose.

It can be also used in making a rounded corner panel which will be flexible from all sides ( Vertically and Horizontally).

With three columns, you're going to have to use ALA's "faux columns" technique. With two columns you could put in a "spacer" div to drag the background all the way down to the bottom of the page, but this won't work with three columns. Yes, it may not seem the most efficient way to do it, but it's a technique that works.

With three columns, you're going to have to use ALA's "faux columns" technique. With two columns you could put in a "spacer" div to drag the background all the way down to the bottom of the page, but this won't work with three columns. Yes, it may not seem the most efficient way to do it, but it's a technique that works.

 

Bro Can you just give a details how to fix it with a spacer Div, as I tried this already but it worked fine in Firefox but was creating problem in IE6.

May be I used some wrong process..