Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 29710

May 18th, 2005

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

Expand Post »

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)

|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)

 
 
|side|  content   |side|
|    |  content   |___ |
|___ |  content
         content

I have:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

 
|side |  content  |side |
|     |  content  |     |
|     |  content  |     |
|     |  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

Similar Threads

I need to grab the height of a div. in JavaScript / DHTML / AJAX
Center Div in Browser in JavaScript / DHTML / AJAX
help with Java in Java

liliafan

Reputation Points: 66

Solved Threads: 3

Junior Poster

Offline

117 posts
since Apr 2004

Permalink

May 19th, 2005

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

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.

tgreer

Team Colleague

Reputation Points: 227

Solved Threads: 37

Made Her Cry

Offline

1,697 posts
since Dec 2004

Permalink

May 19th, 2005

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

Quote 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)
html,body {
    min-height: 100%;
    height: 100%;
}
html,body {
    min-height: 100%;
    height: 100%;
}

However, this seems to only take into account the screen height not the height of the elements contained within the screen.

liliafan

Reputation Points: 66

Solved Threads: 3

Junior Poster

Offline

117 posts
since Apr 2004

Permalink

May 19th, 2005

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

Yes, you're right.

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<script type="text/javascript">
//<![CDATA[
onload=function() {
document.getElementById('leftbar').style.height=
document.getElementById('rightbar').style.height=
document.getElementById('maincontent').offsetHeight+"px";
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
onload=function() {
document.getElementById('leftbar').style.height=
document.getElementById('rightbar').style.height=
document.getElementById('maincontent').offsetHeight+"px";
}
//]]>
</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.

tgreer

Team Colleague

Reputation Points: 227

Solved Threads: 37

Made Her Cry

Offline

1,697 posts
since Dec 2004

Permalink

May 19th, 2005

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

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

liliafan

Reputation Points: 66

Solved Threads: 3

Junior Poster

Offline

117 posts
since Apr 2004

Permalink

May 19th, 2005

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

It should be cross-browser, though I admit I only tested with FireFox. I really don't use IE anymore.

tgreer

Team Colleague

Reputation Points: 227

Solved Threads: 37

Made Her Cry

Offline

1,697 posts
since Dec 2004

Permalink

May 19th, 2005

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

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)
document.getElementById('leftbar').style.height=
document.getElementById('rightbar').style.height=
(document.getElementById('maincontent').offsetHeight + 10)+"px";
document.getElementById('leftbar').style.height=
document.getElementById('rightbar').style.height=
(document.getElementById('maincontent').offsetHeight + 10)+"px";

Extra 10px added on and it looks great.

Thank you so much for the help.

Ben

liliafan

Reputation Points: 66

Solved Threads: 3

Junior Poster

Offline

117 posts
since Apr 2004

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Dynamically modifying the CSS attributes through Javascript

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: hit counters

DaniWeb Message

Cancel Changes

User Name
Password