Trouble with expanding divs

Hey everyone, I am having problems with a website that I have taken over the maintenance for. The previous IT manager created the site and overall most of his code looks good. However there is one major bug I am running into and can't seem to fix.

Basically there are three columns two on the side that hold background images and the one in the middle that actually has the content. Here is code:

<div class="main">
       <div class="main_left">
             <div class="left_top"></div>
             <div class="left_side"></div>
       </div>
                
       <div class="main_center">
		This is a test page for new features being implemented on QFCT.ca<br/>
                <?php
		      for($i=1;$i<20;$i++){
			echo $i."<br/>";
		      }
	        ?>
       </div>
                
       <div class="main_right">
              <div class="right_side"></div>
              <div class="right_bot"></div>
        </div>
</div>

Code (markup):

The php code in there is just to generate some numbers so I can play around with dynamic content. In his style sheet he has the div main have a static height. Unfortunately this is not acceptable because we need the divs to be dynamic. Here is the corresponding css:

div.main{
	width:100%;
	/*height:1010px;*/
	margin:0px auto;
}
div.main_left{
	width:198px;
	height:100%;
	background-color:#000;
	float:left;
}
div.left_top{
	width:198px;
	height:198px;
	float:left;
	background-image:url(../img/top_curve.png);
	background-repeat:no-repeat;
}
div.left_side{
	width:197px;
	height:100%;
	float:left;
	background-color:#000;
	border-left:#333 6px solid;
	border-bottom:#333 6px solid;
}
div.main_center{
	width:805px;
	min-height:192px;
	height:100%;
	float:left;
	border-top:#333 6px solid;
	border-bottom:#333 6px solid;
}
div.main_right{
	width:197px;
	height:100%;
	background-color:#000;
	float:right;
}
div.right_side{
	width:100%;
	background-color:#000;
	height:100%;
	float:left;
	border-right:#333 6px solid;
	border-top:#333 6px solid;
}
div.right_bot{
	width:103.5%;
	height:198px;
	float:left;
	background-image:url(../img/bottom_curve.png);
	background-repeat:no-repeat;
	background-position:right;
}

Code (markup):

I have started looking at the css but I have not been able to make the side columns dynamically expand with the center column. I have done some work with Google and tried to find a solution but I could not adapt anything I found to work properly. The actual page can bee seen at http://qfct.ca/test.php

Hopefully someone can see a fix that I can apply because I really would like to avoid having to redesign the page to work properly.

Thanks in advance,

Joe

 

<div style="display:table;width:100%;min-height:100%;">
<div style="display:table-row;">
<div id="left" style="display:table-cell;">

</div>
<div id="center" style="display:table-cell;">

</div>
<div id="right" style="display:table-cell;">

</div>
</div>
</div>

 

Could you elaborate a bit more please. If I just had a standard 3 columns this would not have been so hard to figure out. Unfortunately I have those images in the top left and bottom right which are making this quite complicated for me.

Thanks for the help.

 

I didn't get where is the actual page? Display-table, table-row and table-cell will solve the issue with expanding divs - all three table-cell divs will have the same height (the highest); more, if display-table div have width=100% yoy won't have to scroll horizontaly

You don't have to redesign the whole thing, just to find the right css

 

Ok thanks, the page I am testing with is at http://qfct.ca/test.php. I will take a look again at what you said and try to make it work.

 

So i have been playing with it but there is one thing i cant get to work. I need to have a div inside the left and right main divs that has a border. I cant make this inside div extend to the full height of the outer left div. Any ideas how I can fix this?

Heres the code:

<div style="display:table;width:1200px;min-height:100%; margin:0px auto;">
        <div style="display:table-row;">
            <div id="left" style="display:table-cell; width:198px; border-bottom:#333 6px solid;">
            	<div id="InnerLeft" style="background-image:url(top_curve.png); background-position:top; background-repeat:no-repeat; height:198px; width:100%;"></div>
                <div id="LeftSide" style="display:table-cell; border-left:#333 6px solid;"></div> <!--Need this div to extend to full height so that the border shows --> 
            </div>
            <div id="center" style="display:table-cell; border-top:#333 6px solid; border-bottom:#333 6px solid;  ">
            	<?php
			for($i=0;$i<=20;$i++){
			       echo $i."<br/>";
			}
		?>
            </div>
            <div id="right" style="display:table-cell; background-image:url(bottom_curve.png); background-repeat:no-repeat; background-position:bottom; width:198px; border-top:#333 6px solid;"></div>
        </div>
    </div> 

HTML:

Thanks in advance, hopefully its just something small that I am missing.

 

inside a table-cell div you have to be carefull about cross-browser positioning. if i get it right, bellow you have a 4-column table

<div style="display:table;width:1200px;min-height:100%; margin:0px auto;">

<div style="display:table-row;">
​

<div id="LeftSide" style="display:table-cell; width:6px;background-color:#333;"></div>
<div id="left" style="display:table-cell; width:192px; border-bottom:#333 6px solid;">
​

<div id="InnerLeft" style="position:relative;background-image:url(top_curve.png); background-position:top; background-repeat:no-repeat; height:198px; width:100%;"></div>​

</div>
<div id="center" style="display:table-cell; border-top:#333 6px solid; border-bottom:#333 6px solid; ">
​

<?php
for($i=0;$i<=20;$i++){
echo $i."<br/>";
}
?>​

</div>
<div id="right" style="display:table-cell; background-image:url(bottom_curve.png); background-repeat:no-repeat; background-position:bottom; width:198px; border-top:#333 6px solid;"></div>​

</div>​

</div>

 

Thanks for the help! It finally now works.