Jump to content

3 Column Layout - Extend Middle Column 100%


danmatley
 Share

Recommended Posts

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?

Edited by Matley
Link to comment
Share on other sites

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;}

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...