Jump to content

columns of equal height of content


Recommended Posts

i have a content area and then a right column....how do i set the right column to be the same height as the content? the content within the content div will change often so i don't want to set a pixel height...i want it to always be the same height. how do i accomplish this?

Link to comment
Share on other sites

If you want to avoid jscript and keep your layouts "natural", the easy to use trick in css is called faux columns. (this IS the css thread)


It emulates the look of equal height columns across all browsers.


The original  (shows the technique) -faux columns- by Dan Cederholm.


Revised technique - (for liquid layouts) faux columns for liquid layouts


Gotta admit that jscript solution is pretty cool - but I try to limit jscript.

Link to comment
Share on other sites

Gotta admit that jscript solution is pretty cool - but I try to limit jscript.


Agreed. I tend to try to make it where I just can avoid HAVING to have the equal height columns at all in the first place. I really hate using JS when it isn't needed.. Especially when it comes to controlling page layout and such.

For some things however, it comes in handy.


The faux-columns way is definitely a way to go too, but bothers me about it is when it comes to wanting to use another sort of background image in the same element, it becomes rather troublesome.

Link to comment
Share on other sites

If IE supported Display: table; you could have easily used that to emulate table like height/width control.


Faux  columns is extremely difficult to implement when it comes to IE7. I had to "hack" IE7 to make padding/margins cross browser complaint. It was difficult primarily because I had the two columns as two separate boxes.


I discourage utilizing javascript. It is unnecessary.

Link to comment
Share on other sites

This thread is more than a year old. Are you sure you have something important to add to it?

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.