•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 361,902 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,360 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 16201 | Replies: 6
 |
•
•
Join Date: Apr 2004
Location: Virginia Beach
Posts: 113
Reputation: 
Rep Power: 5
Solved Threads: 2
Junior Poster
Hi All
I am hoping someone can help me out since this is driving me nuts.
On my site I have 3 columns:
What I want to do is have the height of the 2 sidebars controlled by the height of the content. So instead of:
I have:
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
I am hoping someone can help me out since this is driving me nuts.
On my site I have 3 columns:
|sidebar| content |sidebar|
|side| content |side|
| | content |___ |
|___ | content
content
I have:
|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
Application development, webhosting, and much more: www.webcentric-hosting.com
•
•
Join Date: Dec 2004
Posts: 1,589
Reputation:
Rep Power: 7
Solved Threads: 34
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.
•
•
Join Date: Apr 2004
Location: Virginia Beach
Posts: 113
Reputation:
Rep Power: 5
Solved Threads: 2
Junior Poster
•
•
•
•
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:
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.
Application development, webhosting, and much more: www.webcentric-hosting.com
•
•
Join Date: Dec 2004
Posts: 1,589
Reputation:
Rep Power: 7
Solved Threads: 34
Yes, you're right.
You'll have to use JavaScript. Add this in your document head:
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.
You'll have to use JavaScript. Add this in your document head:
<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.
•
•
Join Date: Apr 2004
Location: Virginia Beach
Posts: 113
Reputation:
Rep Power: 5
Solved Threads: 2
Junior Poster
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
Thanks so much for the pointers I will play with it this evening.
Ben
Application development, webhosting, and much more: www.webcentric-hosting.com
•
•
Join Date: Dec 2004
Posts: 1,589
Reputation:
Rep Power: 7
Solved Threads: 34
It should be cross-browser, though I admit I only tested with FireFox. I really don't use IE anymore.
•
•
Join Date: Apr 2004
Location: Virginia Beach
Posts: 113
Reputation:
Rep Power: 5
Solved Threads: 2
Junior Poster
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.
Extra 10px added on and it looks great.
Thank you so much for the help.
Ben
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
Application development, webhosting, and much more: www.webcentric-hosting.com
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
Linear Mode
- I need to grab the height of a div. (JavaScript / DHTML / AJAX)
- Center Div in Browser (JavaScript / DHTML / AJAX)
- help with Java (Java)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Dynamically modifying the CSS attributes through Javascript
- Next Thread: hit counters
