Drop this file unchanged into examples/layout in the 3.0 trunk with the latest build:

Code:
<html>
<head>
  <title>Column Layout</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

    <!-- GC -->
     <!-- LIBS -->
     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
     <!-- ENDLIBS -->

    <script type="text/javascript" src="../../ext-all.js"></script>

    <!--<script language="javascript" src="../grid/PropsGrid.js"></script>-->
    <style type="text/css">
    html, body {
        font:normal 12px verdana;
        margin:0;
        padding:0;
        border:0 none;
        overflow:hidden;
        height:100%;
    }
    .x-panel-body p {
        margin:5px;
    }
    .x-column-layout-ct .x-panel {
        margin-bottom:5px;
    }
    .x-column-layout-ct .x-panel-dd-spacer {
        margin-bottom:5px;
    }
    .settings {
        background-image:url(../shared/icons/fam/folder_wrench.png) !important;
    }
    .nav {
        background-image:url(../shared/icons/fam/folder_go.png) !important;
    }
    </style>
    <script type="text/javascript">

    Ext.onReady(function(){

       // NOTE: This is an example showing simple state management. During development,
       // it is generally best to disable state management as dynamically-generated ids
       // can change across page loads, leading to unpredictable results.  The developer
       // should ensure that stable state ids are set for stateful components in real apps.
       Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

       var viewport = new Ext.Viewport({
            layout:'border',
            items:[{
                region:'west',
                id:'west-panel',
                title:'West',
                split:true,
                width: 200,
                minSize: 175,
                maxSize: 400,
                collapsible: true,
                margins:'35 0 5 5',
                cmargins:'35 5 5 5',
                layout:'accordion',
                layoutConfig:{
                    animate:true
                },
                items: [{
                    html: Ext.example.shortBogusMarkup,
                    title:'Navigation',
                    autoScroll:true,
                    border:false,
                    iconCls:'nav'
                },{
                    title:'Settings',
                    html: Ext.example.shortBogusMarkup,
                    border:false,
                    autoScroll:true,
                    iconCls:'settings'
                }]
            },{
                region:'center',
                margins:'35 5 5 0',
                xtype: 'tabpanel',
                activeTab: 0,
                items:{
                    xtype: 'container',
                    autoEl: {},
                    title: 'Tab with embedded column layout',
                    style: "overflow:auto",
                    items: {
                        xtype: 'container',
                        autoEl: {
                            id: 'column-container'
                        },
                        layout:'column',
                        items:[{
                            width: 200,
                            baseCls:'x-plain',
                            bodyStyle:'padding:5px 0 5px 5px',
                            items:[{
                                title: 'A Panel',
                                html: Ext.example.shortBogusMarkup
                            }]
                        },{
                            width: 200,
                            baseCls:'x-plain',
                            bodyStyle:'padding:5px 0 5px 5px',
                            items:[{
                                title: 'A Panel',
                                html: Ext.example.shortBogusMarkup
                            }]
                        }]
                    }
                }
            }]
        });
    });
    </script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
  </body>
</html>
It works on FF and Chrome, but gets a horizontal scrollbar in IE.

The problem is when the ColumnLayout comes to size that innerCt wrapping DIV:

Code:
    onLayout : function(ct, target){
        var cs = ct.items.items, len = cs.length, c, i;

        if(!this.innerCt){
            target.addClass('x-column-layout-ct');

            // the innerCt prevents wrapping and shuffling while
            // the container is resizing
            this.innerCt = target.createChild({cls:'x-column-inner'});
            this.innerCt.createChild({cls:'x-clear'});
        }
        this.renderAll(ct, this.innerCt);

        var size = Ext.isIE && target.dom != Ext.getBody().dom ? target.getStyleSize() : target.getViewSize();

        if(size.width < 1 && size.height < 1){ // display none?
            return;
        }

        var w = size.width - target.getPadding('lr') - this.scrollOffset,
            h = size.height - target.getPadding('tb'),
            pw = w;

        this.innerCt.setWidth(w);
        
        // some columns can be percentages while others are fixed
        // so we need to make 2 passes

        for(i = 0; i < len; i++){
            c = cs[i];
            if(!c.columnWidth){
                pw -= (c.getSize().width + c.getEl().getMargins('lr'));
            }
        }

        pw = pw < 0 ? 0 : pw;

        for(i = 0; i < len; i++){
            c = cs[i];
            if(c.columnWidth){
                c.setSize(Math.floor(c.columnWidth*pw) - c.getEl().getMargins('lr'));
            }
        }
    }
If the Container being layed out is not explicitly sized, then IE returns an incorrect offsetWidth.

This should work. DIVs should assume their parent node width.

After running that, at the IE8 Developer tools console type

Code:
Ext.getDom("column-container").offsetWidth;
Ext.getDom("column-container").parentNode.offsetWidth;
See how it just gets it wrong?

It shows identical values on the FB and Chrome consoles.