Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Auto Adjust height of column on right

Posted on 2011-09-13
14
Medium Priority
?
454 Views
Last Modified: 2012-05-12
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?
0
Comment
Question by:ee-itpro
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
  • 4
14 Comments
 
LVL 1

Expert Comment

by:rsmithnt
ID: 36529708
I would use something like jquery
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36529716
You can do this in a variety of ways. Are you opposed to Jquery/Javascript or do you want a pure CSS solution?
0
Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

 

Author Comment

by:ee-itpro
ID: 36529730
Not opposed to jquery but would prefer a css solution
0
 

Author Comment

by:ee-itpro
ID: 36529743
The link for css does not have the code, it only shows what the end result looks like
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36529751
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
 
LVL 1

Expert Comment

by:rsmithnt
ID: 36529760
What browser are you programming for.  Sometimes a css solution may not be compatible with the browser.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36529796
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
 
LVL 1

Expert Comment

by:rsmithnt
ID: 36529889
$('#right_content').height($('#left_content_middle').height());

using jquery
0
 

Author Comment

by:ee-itpro
ID: 36529897
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
 
LVL 30

Expert Comment

by:LZ1
ID: 36529954
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
 
LVL 1

Expert Comment

by:rsmithnt
ID: 36529970
LZ1 is correct.  In my opinion jquery is your best cross browser solution.
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 2000 total points
ID: 36530030
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
 

Author Comment

by:ee-itpro
ID: 36531752
Thanks,  i'll try out the above stuff and let you people know how it goes
0

Featured Post

Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses

719 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question