columns within a div

[hamlinworld]

I thought this one was going to be EZ. Boy was I wrong. I have a div with left and right margins set to 150px (making room on the outside for menus, ads, etc.) Within this div I want two columns nicely centered and the same width. I'm even willing to use tables. The thing is as I resize the browser window the internal divs or table doesn't resize right and the table or divs end up outside the containing div. How can I get what I want and still have a fluid center to my site.

I'm having these problems with IE 5.5 though they may also be problems in other browsers.

[marek]

HTML:

<div>
<div id="left">
right left
</div>
<div id="right">
right column
</div>
</div>

CSS:

div.left, div.right {
width: 49%;
}
div.left {
float: left;
}
div.right {
float: right;
}

[hamlinworld]

Gave it a quick shot but it didn't help... Here's some code to play with just to give you an idea what I'm running into. This works as long as I don't resize the window. As it gets smaller things begin to fall apart. The percentage of width each of the 2 columns has doesn't appear to get it's value from the parent container class. I'm wondering if there is a way around this?

html:

<div class="container">
<div class="left">
right left
</div>
<div class="right">
right column
</div>
<div class="spacer">&nbsp;</div>
</div>

css:

.container{
margin: 0 150px;
background:red;
padding:5px;
}
.left, .right {
width: 30%;
background:blue;
}
.left {
float: left;
}
.right {
float: right;
}
.spacer {
padding:0;
margin:0;
clear:both;
}

[marek]

If the percentage of width each of the 2 columns has doesn't appear to get it's value from the parent container class, then on of the columns probably contains wider content (images). In that case either remove content that cannot be wrapped, or use the overflow property.

This set up doesn't work only if the sum of all columns' widths makes 100% (because of rounding errors), If it is less than 99% (including borders and padding), it must be OK.

[hamlinworld]

Now I'm truly confused. I've got 2 columns each of 50% within a <div> they are floated and they work just fine in Mozilla and IE6. I have no idea why though? I was told that 100% was too much. This is going to take some investigation on my end. Thanks for trying to help a throughly confused individual (me)