Really simple CSS problem

Hi, I've got a really simple CSS problem that I hope any of you can help me with!

Here is what I have right now:

http://www.firstmerch.com/index.html

I'm trying to make 3 columns for a website; left column, middle column, and right column. I used "float: left" on all 3 columns with fixed widths for each column and they nicely go across the page.

But here is the problem, I do not want the middle column to be a fixed width - I want it to fill across the page so I changed it to 100% for the middle column, but then the right column goes onto the next line/row below, rather then sating on the right. However, the left column stays where it was.

Can anybody tell me why it's doing this?

Here is the code of the CSS:

#leftcolumn
{
background: #666666;
width: 157px;
float: left;
}

#middlecolumn
{
background: #dddddd;
width: 100%:
float: left;
}

#rightcolumn
{
background: #999999;
width: 157px;
float: left;
}

well you are telling #middlecolumn to fill up 100% of the space, and as floating takes the element out of the document flow, you end up with this problem.

simple fix is to remove the width + float from #middlecolumn, and float #rightcolumn "right" instead of left.

add a margin to #middlecolumn if you desire some spacing.

and change the markup ~


<div id="leftcolumn">Left Section</div>
<div id="rightcolumn">Right Section</div>
<div id="middlecolumn">Middle Section</div>


also you have used a ":" instead of ";" to close width:100%;

Then you won't want to float the middle column. This may help.

http://bonrouge.com/3c-hf-fluid.php

Thank you very much Met and Aerospace_Eng_.

Met - I did what you said, but now having filled up the middle section a little bit, this happens:

http://www.firstmerch.com/index.html

The middle column is now spreading underneath both left and right columns. How do I prevent this?

Aerospace_Eng_ - Is this the problem you said might happen in your previous post?

Thanks, James

Yes but as stated you need to add a left and right margin that is greater than the width of your columns. The link I gave you is exactly what you need. Learn from it, use it.

thanks aerosmith, i'm taking it all in now....:thumbsup: