Auto Adjust height of column on right

Hi

   Please take a look here -  http://tinyurl.com/cityads


I want the column on right that has the search box  to auto adjust itself to be of the same height as the content column on left.


So if the height of the column on left increases or decreases the right column should adjust itself to the same height so both of them are at the same level from top to bottom and the page looks good.


How can i do this?
ee-itproAsked:
Who is Participating?
 
LZ1Commented:
In order to use the pure CSS solution you'll have to do the following:
1. Give each column a class of .col
2. Use this CSS:
.col{padding:10px 10px 9000px !important;margin-bottom:-9000px;}

Open in new window

3. Remove both of the .latestposts divs from the #main_content. This will actually hurt your equal height columns because it's adding stuff to the bottom outside of the actual "column" you want.
4. Add overflow:hidden to your #content
5. Remove height:auto from your columns and #content


The main caveat here is that your rounded corner on your right column is going to get lost.  Try the above and let us know.

0
 
rsmithntCommented:
I would use something like jquery
0
 
LZ1Commented:
You can do this in a variety of ways. Are you opposed to Jquery/Javascript or do you want a pure CSS solution?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
ee-itproAuthor Commented:
Not opposed to jquery but would prefer a css solution
0
 
ee-itproAuthor Commented:
The link for css does not have the code, it only shows what the end result looks like
0
 
LZ1Commented:
View the source:


div.eW { overflow:hidden; }
div.eW.eB { height:1px; font-size:0; }
div.eW div.eH { float:left; width:30%; background-color:#9F0; margin-right:5px; padding:10px; padding-bottom:9010px; margin-bottom:-9000px; border:1px solid #000; }

Open in new window

0
 
rsmithntCommented:
What browser are you programming for.  Sometimes a css solution may not be compatible with the browser.
0
 
LZ1Commented:
I just noticed your using a strict Doctype. In the link I provided he's using a transitional. This will also effect the way the browser interprets the CSS.  We may want to look at the Jquery/JS solution.
0
 
rsmithntCommented:
$('#right_content').height($('#left_content_middle').height());

using jquery
0
 
ee-itproAuthor Commented:
I am looking at cross browser support mainly FF, Ie, Chrome ... support for older versions of these browsers as well(ie 6 as well if possible)


I'm not proficient with css, so can you please explain me how that css code that you provided works


Are these 3 different divs , the last 2 inheriting any properties from the first one?

div.eW

div.eW.eB

div.eW div.eH


I'd look at Jquery but if the Javascript support is turned off for the browser it won't work.
0
 
LZ1Commented:
If JS is turned off on the browser, they probably won't be browsing your site anyways. Better than 90% of users have JS on with some protection on the OS or browser side of things.

To answer your question though what they are doing is using a large amount of padding-bottom as well as margin-bottom. (the same amount actually).  Then your parent div, will have overflow:hidden to hide anything that won't have actual content.
0
 
rsmithntCommented:
LZ1 is correct.  In my opinion jquery is your best cross browser solution.
0
 
ee-itproAuthor Commented:
Thanks,  i'll try out the above stuff and let you people know how it goes
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.