افزایش ارتفاع ستون ها در صفحه به صورت هماهنگ

[ERIKA]

سلام
من یک قالبی دارم که شامل 3 تا ستون هست و این ستون ها با توجه به محتوا افزایش پیدا میکنند و کش می ایند بعد زیر این سه تا ستون قسمت فوتر هست این فوتر می افته زیر بلند ترین ستون حالا میخام ببینم باید چکار کنم که این سه تا ستون هم زمان با هم افزایش پیدا کنند.
این را چطوری میتونم درست کنم





css

.main
{
width: 900px;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
/* border-radius: 9px 9px 9px 9px;*/
background: #ffffff;
border: 1px solid #b4bbc3;

}
/************************************************** ************************************************** */
.rightcolumn
{

border-style: none;
background: #EFBD98 none repeat scroll 0 0;
float: right; width:163;
text-align: center;
margin: 2px 0 px;
padding: 0 0 px;
width: 163px;
min-height: 700px;
}

.titlemenuright
{
background: no-repeat scroll left center;
width: 147px;
font: 11px Tahoma;
padding: 3px;
height: 20px;
background-color: #E29780;
margin-right: 5px; margin-top: 3px;
border-radius: 9px 9px 0px 0px;
}
.panelmenuright
{
width: 147px;
background-color: #FFDBBB;
margin-right: 5px; padding: 3px;text-align:right;
}

empty
{
height: 20px;
background: #EFBD98 none repeat scroll 0 0;
}
/************************************************** ************************************************** */
.centercoulmn
{
background: #FFFFFF none repeat scroll 0 0;
float: right;
margin: 0 0px;
overflow: hidden;
padding: 0 0 px;
text-align: right;
width: 555px;
min-height: 700;
}
.tickerpane {
border-bottom: 1px solid #EEEEEE;
color: #B20815;
padding: 3px 22px 3px 25px;
height:20;
}
/************************************************** ************************************************** */
.leftcoulmn
{
background: border-right: 3px solid #DBDBDB;
float: left;
margin: 0 0 px 0px;
overflow: hidden;
padding: 0 0 px;
text-align: center;
width: 180px;
min-height: 700;
background-color: #CCCCCC;
background-repeat: no-repeat;
}
.titlemenuleft {
margin: 2px 10px 2px 5px;
text-align: right;
width:165px;
}
.panelmenuleft
{
border-style: solid;
padding: 3px 0;
min-height: 200px;
}
/************************************************** ************************************************** */
.footerpane {
text-align: right;
width: 900px;
}
.copyright {
background: none repeat scroll 0 0 #999999;

float:right;

padding:2px 0;
text-align: center;
width: 900px;
}

/////////////
html

<div class="main" >
<!--////////////////////////////////////////////////////////////////////////////////////-->

<div class="header">
<div class="logo"><img alt="Bushehr News Onlinge Logo" src="Img/logo.jpg" /></div>
<div class="joiner">
<div class="laguage">تماس با ما</div>
<div class="time">تاریخ امروز:</div>
<div class="location">جستجو در سایت:</div>
</div>
</div>
<!--////////////////////////////////////////////////////////////////////////////////////-->
<div class="rightcolumn">
<div class="titlemenuright" > <b>گروه های خبری</b> </div>
<div class="panelmenuright">
<img src="Img/dot.gif" alt=""/> صفحه اصلی
<br />
<img src="Img/dot.gif" alt=""/>عناوین کل خبر
</div>
<!-- <div id="left-navbar-menu" class="sdmenu" >گروه های خبری </div>-->
<!-- <div class="menutitle">kkkkkkkkkk</div>-->
<!-- <div class="tablighat"></div>
<div class=""></div>-->

</div>
<!--////////////////////////////////////////////////////////////////////////////////////-->
<div class="centercoulmn">
<div class="tickerpane">marqueee<br /></div>
<div class="slider"></div>
</div>
<!--////////////////////////////////////////////////////////////////////////////////////-->
<div class="leftcoulmn">
<div class="titlemenuleft"> تبلیغات</div>
<div class="panelmenuleft"> </div>

<div class="titlemenuleft"> اخرین عناوین خبری</div>
<div class="panelmenuleft"> </div>

<div class="titlemenuleft"> پربازدید ترین ها</div>
<div class="panelmenuleft"> </div>


<div class="titlemenuleft"> پربازدید ترین ها</div>
<div class="panelmenuleft"> </div>

<div class="titlemenuleft"> پربازدید ترین ها</div>
<div class="panelmenuleft"> </div>

<div class="titlemenuleft"> پربازدید ترین ها</div>
<div class="panelmenuleft"> </div>

<!--////////////////////////////////////////////////////////////////////////////////////-->
</div>
<div class="footerpane">
<div class="copyright"> copyright <br /></div>

</div>
</div>
</body>
</html>

[ravand]

معمولا براي حل اين مشكل بايد يه div ديگه درست كني كه سه تا div ديگه داخلش باشه.

[ERIKA]

معمولا براي حل اين مشكل بايد يه div ديگه درست كني كه سه تا div ديگه داخلش باشه.

بله درسته ،من هم همین ار را کردم هر سه تا ستون را داخل گزاشتم div class=main و بعد در زیر ان footer را قرار دادم
ولی بازهم مشکل داره

[ravand]

شما ديوي كه گفتم بايد قبل از فوتر قرار ميدادي. من براتون قرار دادم ولي كدهاي استايل رو براتون نذاشتم. اين ديگه كار خودتونه. وقتي كدهاي style رو بهش داديد تست كنيد.


<style>
.main
{
width: 900px;

margin-top: 20px;
margin-bottom: 20px;
/* border-radius: 9px 9px 9px 9px;*/
background: #ffffff;
border: 1px solid #b4bbc3;

}



}
.rightcolumn
{

border-style: none;
background: #EFBD98 none repeat scroll 0 0;
float: right; width:163;
text-align: center;
margin: 2px 0 px;
padding: 0 0 px;
width: 163px;
min-height: 700px;
}

.titlemenuright
{
background: no-repeat scroll left center;
width: 147px;
font: 11px Tahoma;
padding: 3px;
height: 20px;
background-color: #E29780;
margin-right: 5px; margin-top: 3px;
border-radius: 9px 9px 0px 0px;
}
.panelmenuright
{
width: 147px;
background-color: #FFDBBB;
margin-right: 5px; padding: 3px;text-align:right;
}

empty
{
height: 20px;
background: #EFBD98 none repeat scroll 0 0;
}
/************************************************** ************************************************** */
.centercoulmn
{
background: #FFFFFF none repeat scroll 0 0;
float: right;
margin: 0 0px;
overflow: hidden;
padding: 0 0 px;
text-align: right;
width: 555px;
min-height: 700;
}
.tickerpane {
border-bottom: 1px solid #EEEEEE;
color: #B20815;
padding: 3px 22px 3px 25px;
height:20;
}
/************************************************** ************************************************** */
.leftcoulmn
{
background: border-right: 3px solid #DBDBDB;
float: left;
margin: 0 0 px 0px;
overflow: hidden;
padding: 0 0 px;
text-align: center;
width: 180px;
min-height: 700;
background-color: #CCCCCC;
background-repeat: no-repeat;
}
.titlemenuleft {
margin: 2px 10px 2px 5px;
text-align: right;
width:165px;
}
.panelmenuleft
{
border-style: solid;
padding: 3px 0;
min-height: 200px;
}
/************************************************** ************************************************** */
.footerpane {
text-align: right;
width: 900px;
}
.copyright {
background: none repeat scroll 0 0 #999999;

float:right;

padding:2px 0;
text-align: center;
width: 900px;
}

</style>

<div class="main" >
<div class="dakhel">


<div class="header">
<div class="logo"><img alt="Bushehr News Onlinge Logo" src="Img/logo.jpg" /></div>
<div class="joiner">
<div class="laguage">تماس با ما</div>
<div class="time">تاریخ امروز:</div>
<div class="location">جستجو در سایت:</div>
</div>
</div>

<div class="rightcolumn">
<div class="titlemenuright" > <b>گروه های خبری</b> </div>
<div class="panelmenuright">
<img src="Img/dot.gif" alt=""/> صفحه اصلی

<img src="Img/dot.gif" alt=""/>عناوین کل خبر
</div>



</div>

<div class="centercoulmn">
<div class="tickerpane">marqueee</div>
<div class="slider"></div>
</div>

<div class="leftcoulmn">
<div class="titlemenuleft"> تبلیغات</div>
<div class="panelmenuleft"> </div>

<div class="titlemenuleft"> اخرین عناوین خبری</div>
<div class="panelmenuleft"> </div>

<div class="titlemenuleft"> پربازدید ترین ها</div>
<div class="panelmenuleft"> </div>


<div class="titlemenuleft"> پربازدید ترین ها</div>
<div class="panelmenuleft"> </div>

<div class="titlemenuleft"> پربازدید ترین ها</div>
<div class="panelmenuleft"> </div>

<div class="titlemenuleft"> پربازدید ترین ها</div>
<div class="panelmenuleft"> </div>


</div>
</div>
<div class="footerpane">
<div class="copyright"> copyright </div>

</div>
</div>

</body>
</html>
اسم ديو هم هست

<div class="dakhel">
و قبل از فوتر يعني كد زير بسته ميشه.

<div class="footerpane">
موفق باشي.