Three column div problems?

Question

I have a page with three columns. They're all fluid:

#LeftColumn
{
display:table-cell;
float:left;
padding-left:0;
padding-right:16%;
padding-top:0;
padding-bottom:1%;
margin-right:1%;
margin-left:0;
margin-bottom:0;
margin-top:0;
position:static;
}

#RightColumn
{
display:table-cell;
float:right;
padding-right:0;
padding-left:16%;
padding-top:0;
padding-bottom:1%;
margin-left:1%;
margin-right:0;
margin-bottom:0;
margin-top:0;
}

#Content
{
display:table-cell;
width:auto;
}

In the page they are represented as follows:

<div id="LeftColumn">
</div>
<div id="RightColumn">
</div>
<div id="Content">
<!-- Stuff goes here -->
</div>

I've created a few pages in my project with this layout, and it worked rather well. However, there's a problem: The middle column only expands when I put text in it. Thus, when I place something such as a horizontal ruler in it, it's only as wide as the previous and following paragraphs. I want the center div (#Content) to be as wide as the space between the left and right columns (#LeftColumn, #RightColumn) Is this possible?

Answer 1

try giving #Content display: block. and give all three divs the same height. that will expand to fill the empty space:

http://jsfiddle.net/HMS2s/

Answer 2

Something like the following maybe?

CSS

#LeftColumn
{
display:table-cell;    
float:left;
padding-left:0;
padding-right:16%;
padding-top:0;
padding-bottom:1%;
margin-right:1%;
margin-left:0;
margin-bottom:0;
margin-top:0;
position:static;
}

#RightColumn
{
display:table-cell;    
float:right;    
padding-right:0;
padding-left:16%;
padding-top:0;
padding-bottom:1%;
margin-left:1%;
margin-right:0;
margin-bottom:0;
margin-top:0;
}

#Content
{  
overflow: hidden;    
}

HTML

<div id="LeftColumn">
</div>
<div id="RightColumn">
</div>
<div id="Content" class="Content">
<!-- Stuff goes here -->
</div>

Example

Answer 3

Delete display:table-cell; from #Content and add overflow:hidden;

Answer 4

It helps to establish a container of the objects, so their percentiles have are based off a solid, but I imagine you'll handle the media queries. The padding shouldn't be used to create width for the middle column because it will take up space which is what I believe you were trying to do? If you want equal height columns there is a really long article on this that you should check out here.

Example of this CSS

#container{
width:80%;
float:left;
}
#leftcolumn{
float: left;
width: 33%;
background-color:green;
padding: 0 0 1% 0;
margin: 0 1% 0 0;
display: table-cell;
}
#middlecolumn{
overflow:hidden;
background-color:blue;
padding: 0 1% 1% 1%;
}
* html #middlecolumn{float:left}
* html #middlecolumn #content{width:100%;}

#rightcolumn{
float:right;
width: 33%;
background-color:red;
position:relative;
padding: 0 0 1% 0;
margin: 0 0 0 1%;
display: table-cell;
}