In firefox and opera, my page looks correct: http://awesomescreenshot.com/0c9iw0eed

It's a div that is floated to the left with a large margin, with a div on each side of the text inside. In firefox it stretches to accomodate the text. In IE: http://i.imgur.com/qbgJZ.png

(chrome does the right side wrong like firefox, but doesn't stretch it out)

HTML:

 <div class="page-title">
    <div id="title-left"></div>
    Sam's Page
    <div id="title-right"></div>
 </div>

pretty much all the css:

    .page-title {
        font-family: "Accidental Presidency", accid;
        background: #5ea4d7;
        color: #ffffff;
        font-size: 53px;
        float: left;
        margin-left: 485px;
        text-align: center;
        height: 64px;
        min-width: 150px;
    }
    
    #title-left {
    width: 94px;
    height: 64px;
    background: url('images/page-title-left.png') no-repeat bottom;
    float: left;
    }
    
    #title-right {
    width: 94px;
    height: 64px;
    background: url('images/page-title-right.png') no-repeat bottom;
    float: right;
    }

http://tycoontalk.freelancer.com/css...you-clear.html

I'm not sure what you're referring to. I understand how clearing them works, but I thought that was just an issue of elements extending out of their containers vertically.

I tried the outer thing from this page, but it did nothing http://css-discuss.incutio.com/wiki/Clearing_Space

uncleared floats will not be constrained by the parent container in both vertical AND horizontal directions.

Do they need to be cleared in the same way?
This does nothing:

 <div class="page-title">
    <div id="title-left"></div>
 Sam's Page
     <div id="title-right"></div>
     <div class="clear"></div>
 </div>

and set the right float before the left float in the document flow.

You should avoid adding the non-semantic <div class="clear"> </div>, there are other, better methods for clearing floats that don't add extra un-needed html.

Put this in your css:

/* self-clear floats */
.group:after { 
  clear: both; 
  content: "\0020"; 
  display: block; 
  height: 0; 
  overflow: hidden; 
  visibility: hidden; 
}

/* IE 7 self-clear floats */
*:first-child+html .group,
*:first-child+html div.article-body,
*:first-child+html #wrap {
  min-height: 1px;
}

Then all you need to do is add class="group" to the div (or other element) that contains the floaded elements.

thanks guys, It's looking better

I'm not really comfortable with semantics yet, just getting it to work is still challenging, but I'll keep this one in mind

now it works correctly in firefox, chrome and opera. in ie it stretches out still, but at least now looks right

here's ie: http://i.imgur.com/Krkng.png

any idea why? is it possible to fix? not that it really matters, my site is going to look worse in ie no matter what, but it should at least look as good as possible

Ideas why? Not really, we need a link to the actual page, none of us can debug an image.