Problem with <div> height - Controlling flow from center div

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Apr 2004
Posts: 113
Reputation: liliafan is on a distinguished road 
Solved Threads: 2
liliafan's Avatar
liliafan liliafan is offline Offline
Junior Poster

Problem with <div> height - Controlling flow from center div

 
0
  #1
May 18th, 2005
Hi All

I am hoping someone can help me out since this is driving me nuts.

On my site I have 3 columns:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. |sidebar|    content    |sidebar|
What I want to do is have the height of the 2 sidebars controlled by the height of the content. So instead of:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1.  
  2.  
  3. |side|  content   |side|
  4. |    |  content   |___ |
  5. |___ |  content
  6.          content

I have:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1.  
  2. |side |  content  |side |
  3. |     |  content  |     |
  4. |     |  content  |     |
  5. |     |  content  |     |

This hasn't been a problem so far I was working with fixed length heights of 700px but now I have content that is getting bigger than the 700px limit and the just looks bad with the side bars not matching the rest of the content.

The site is: www.geekserv.com

If anyone can give pointers I would appreciate it. Please note I don't want to end up using tables or frames this site has to remain 100% xhtml and css.

Thanks in advance for any help.

Ben
Application development, webhosting, and much more: www.webcentric-hosting.com
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2004
Posts: 1,655
Reputation: tgreer is an unknown quantity at this point 
Solved Threads: 35
Team Colleague
tgreer tgreer is offline Offline
Made Her Cry

Re: Problem with <div> height - Controlling flow from center div

 
0
  #2
May 19th, 2005
The problem with xhmtl, css, and height, is that percentage heights refer to the percetange of the containing element. The parent element is "body". So, you have to give the body tag a height of 100%, as well as all child tags.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2004
Posts: 113
Reputation: liliafan is on a distinguished road 
Solved Threads: 2
liliafan's Avatar
liliafan liliafan is offline Offline
Junior Poster

Re: Problem with <div> height - Controlling flow from center div

 
0
  #3
May 19th, 2005
•
•
•
•
Originally Posted by tgreer
The problem with xhmtl, css, and height, is that percentage heights refer to the percetange of the containing element. The parent element is "body". So, you have to give the body tag a height of 100%, as well as all child tags.
I was looking at this and experimented with setting:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. html,body {
  2.     min-height: 100%;
  3.     height: 100%;
  4. }

However, this seems to only take into account the screen height not the height of the elements contained within the screen.
Application development, webhosting, and much more: www.webcentric-hosting.com
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2004
Posts: 1,655
Reputation: tgreer is an unknown quantity at this point 
Solved Threads: 35
Team Colleague
tgreer tgreer is offline Offline
Made Her Cry

Re: Problem with <div> height - Controlling flow from center div

 
0
  #4
May 19th, 2005
Yes, you're right.

You'll have to use JavaScript. Add this in your document head:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <script type="text/javascript">
  2. //<![CDATA[
  3. onload=function() {
  4. document.getElementById('leftbar').style.height=
  5. document.getElementById('rightbar').style.height=
  6. document.getElementById('maincontent').offsetHeight+"px";
  7. }
  8. //]]>
  9. </script>

This makes the style.height of your two side divs equal to the offsetHeight of your main div. It will run automatically "onload" (you don't have to modify your body tag), and will validate as xhtml (the CDATA comment sees to this).

Of course, you should remove the "height: 700px;" statements from your CSS.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2004
Posts: 113
Reputation: liliafan is on a distinguished road 
Solved Threads: 2
liliafan's Avatar
liliafan liliafan is offline Offline
Junior Poster

Re: Problem with <div> height - Controlling flow from center div

 
0
  #5
May 19th, 2005
Awesome I will experiment with that, do you know if it is cross browser capable? Or will I need to play with it a little?

Thanks so much for the pointers I will play with it this evening.

Ben
Application development, webhosting, and much more: www.webcentric-hosting.com
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2004
Posts: 1,655
Reputation: tgreer is an unknown quantity at this point 
Solved Threads: 35
Team Colleague
tgreer tgreer is offline Offline
Made Her Cry

Re: Problem with <div> height - Controlling flow from center div

 
0
  #6
May 19th, 2005
It should be cross-browser, though I admit I only tested with FireFox. I really don't use IE anymore.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2004
Posts: 113
Reputation: liliafan is on a distinguished road 
Solved Threads: 2
liliafan's Avatar
liliafan liliafan is offline Offline
Junior Poster

Re: Problem with <div> height - Controlling flow from center div

 
0
  #7
May 19th, 2005
Worked like a charm I just tested it on my development machine and the height works in both ie and firefox, I had to make a slight alteration to get it looking good on IE.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. document.getElementById('leftbar').style.height=
  2. document.getElementById('rightbar').style.height=
  3. (document.getElementById('maincontent').offsetHeight + 10)+"px";

Extra 10px added on and it looks great.

Thank you so much for the help.

Ben
Application development, webhosting, and much more: www.webcentric-hosting.com
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum


Views: 24702 | Replies: 6
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
ajax ajaxcode ajaxhelp animate api automatically beta boarder box bug calendar captchaformproblem card checkbox child class column cookies createrange() css cursor dependent disablefirebug dom download dropdown editor element engine error events explorer ext file firehose flash form forms google gwt html htmlform ie8 iframe image() images internet java javascript jawascriptruntimeerror jquery jsf jsfile jump math matrixcaptcha microsoft mimic mp3 mysql object offline onmouseoutdivproblem onreadystatechange parent passing pdf php player post problem progressbar rated rating regex runtime scroll search select session shopping size sql star stars stretch text textarea twitter validation w3c web website window windowofwords windowsxp wysiwyg xml xspf \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC