View Full Version : need help for a beginner

03-31-2011, 11:44 PM
i have a problem:
i want to change the height of my side bar as long as the text in the center of page long,
it means when I have for ex 3 news in a page the side bar which have a background color must be increase to fit the long of text(3 news).

i think it will do by javascript but i'm not sure!

i my question isn't clear please tell me to explane more i really need it,:)

04-01-2011, 03:46 AM
No javascript required, just some css. You can use "min-height" or don't specify a height at all. It will then stretch with what ever you fill it with.

04-01-2011, 09:51 AM
sorry can you explain some more,
i was set the height auto,

04-01-2011, 09:58 AM
This demo sets all the columns within the "container" div to the height of the tallest column in "container". You can add as many columns as you like inside "container" without having to touch the javascript.

It's only a minor tweak to set a column height to the height of another column which looks like is what you want.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none}
#container {
border: 1px solid red;
width: 800px;
overflow: hidden;
margin: 0px auto 0px auto;
padding: 20px 20px 20px 20px}
/* sidebar's and content's padding values must be the same */
#sidebar {
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
border: 1px solid green;
float: left;
width: 250px}
#content {
margin: 0px 0px 10px 0px;
padding: 10px 10px 10px 10px;
border: 1px solid blue;
float: right;
width: 490px}

#content div {
margin: 0px 0px 0px 0px;
padding: 0px 0px 70px 0px;
<script type="text/javascript">
window.onload=function() {
var maxHeight = 0;
//get the column containers
var colsA = document.getElementById("container").childNodes;
//get the height of the tallest column
for(var i=0; i < colsA.length; i=i+1) {
if(colsA[i].clientHeight > maxHeight) maxHeight = colsA[i].clientHeight;
//set all the column containers heights to maxHeight
for(var i=0; i < colsA.length; i=i+1) {
if(colsA[i].nodeType == 1) colsA[i].style.height = maxHeight+'px';
<div id="container">
<div id="sidebar">
<ul id="menu_list">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<div id="content">
Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel.
Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce
pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut,
ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id,
aliquam non, taciti donec ut. Risus integer hymenaeos velit, nisl suspendisse sollicitudin ut, sed tempor sagittis curae dolor,
volutpat massa ut sagittis. Voluptatem a enim, lobortis lectus volutpat, vitae vero diam purus morbi class, tristique donec
ante sed, ac turpis dis dui vestibulum aut.

04-01-2011, 10:42 AM
thanks sooo much,
thanks,:thumbsup: thanks

04-01-2011, 11:28 AM
you're welcome :)

04-05-2011, 12:02 AM
i was use your structure to solve my problem but, in fact i couldn't locate footer in the bottom:(
because if i take any tag it will be the same height of the side bar