3 Column Layout - Extend Middle Column 100%

[danmatley]

I've got a problem with my homepage where I'm trying to get the middle column (of 3) to extend 100% width between the two side columns. The issue is that when I give the middle column a fixed width, it's fine...but when I give it 100%, it underneath the two side columns and stretches the whole width of the container.So simply put, I'm trying to get it 100% width between the two side columns.Here's an example of my CSS:

#l_col {	padding: 3px;	float: left;	width: 165px;	min-height: 400px;	height: 100%;	margin-left: 10px;}#r_col {	height:auto;	width: 220px;	position: relative;	margin-top: 10px;	float: right;	display: block;}#m_col {	position: relative;	height: 100%;	min-height: 460px;	float: right;        width: 100%}

Here's the HTML:

<div id="l_col"></div><div id="r_col"></div><div id="m_col">       Inside here is two other DIVs with fixed-width of 300px each.</div>

Any ideas?

[Ingolme]

You do that by not assigning a width to the div. It's the natural behaviour of a block element to expand to all the available horizontal space.Don't use float on the middle column, it doesn't need to be floated.

#l_col {float: left;width: 165px;min-height: 400px;height: 100%;margin-left: 10px;}#r_col {height:auto;width: 220px;position: relative;margin-top: 10px;float: right;display: block;}#m_col {position: relative;height: 100%;min-height: 460px;margin-left: 175px;margin-right: 220px;}

[danmatley]

You do that by not assigning a width to the div. It's the natural behaviour of a block element to expand to all the available horizontal space.Don't use float on the middle column, it doesn't need to be floated.

#l_col {float: left;width: 165px;min-height: 400px;height: 100%;margin-left: 10px;}#r_col {height:auto;width: 220px;position: relative;margin-top: 10px;float: right;display: block;}#m_col {position: relative;height: 100%;min-height: 460px;margin-left: 175px;margin-right: 220px;}

Perfect Ingolme! Thank you for the help, and code correction.