2 Column Layout, width: Left Fixed, Right/Content Fluid question

[trbothead]

Does anyone happen to know if it is possible to create a layout that will allow me to have a fixed width left column and fluid right/content column?

The really tricky thing, is that I'm in a CMS. I cannot add inner/outer divs to contain the modules. I have to work with what I have, which is a LeftColumn ContentColumn. I've looked around online, but I could only find solutions that I wouldn't be able to implement because of being inside the CMS. I'm sure I'm not doing a good job at explaining this, so if anyone needs some clarification, just let me know!

I've actually came up with a couple of partial solutions myself, but the problem that I keep running into is that it'll either work on Firefox or IE, not both. I came up with one solution that would work on both, but not on IE 6. The three major browsers of our customers are Firefox 2.0+, IE 6.0+ and Safari 525+.

Did I mention that IE sux! Why they haven't started to become CSS compliant until recently is beyond my comprehension...

<table width='100%' class="Layout" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <table cellpadding=0 cellspacing=0 border=0 width="100%">

               
                <tr>
                    <td class="LayoutTop"><div style='clear:both;width:;' id='LayoutControlContainer120'><table width="100%" border="1"><tr><td>This is a test of the header</td></tr></table>
</div>
</td>
                </tr>
                <tr id="trHorizontalNav">
                    <td></td>
                </tr>
                <tr>

                    <td valign="top" align=center>
                        <table cellpadding="0" cellspacing="0" class="LayoutMiddle">
                            <tr>
                                <td id="ctl06_tdLeftColumn" valign="top" style="width: " Class="LayoutLeftColumn">
<div style='clear:both;width:;' id='LayoutControlContainer119'><style><!--[if IE]>
.LayoutLeftColumn
{
  width:40%;<![endif]
}
-->
</style>


<table width="100%" bgcolor="#eeeeee" style="padding:5px; border:solid 1px #CCCCFF">
   <tr>
      <td>

             
                Your Account: <a href="https://trossenrobotics.americommerce.com/store/myAccount.aspx"> Alex</a> | <a href='/store/logout.aspx'>Logout</a><br/>
           
     </td>
   </tr>
</table>


<table width="100%" style="padding: 2px 5px;" bgcolor="#C0C0C0"><tr><td><span Class='ShopCartLine'><a Class='ShopCartLine' href='/store/ShopCart.aspx'>2 Item(s)</a> ( $689.95 )</span></td></tr></table>

</div><div ID='dvWrapControl118' style='clear:both;width:100%;'><div id="ctl06_ctl01_ctl00_dvControl" class="Control">
    <div id="ctl06_ctl01_ctl00_dvControlHeader" class="ControlHeader">Search:</div>
    <div id="ctl06_ctl01_ctl00_panSearch" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl06_ctl01_ctl00_btnSearch')">
   
        <input name="ctl06$ctl01$ctl00$txtSearchBox" type="text" id="ctl06_ctl01_ctl00_txtSearchBox" class="ControlInput" />
        <input type="image" name="ctl06$ctl01$ctl00$btnSearch" id="ctl06_ctl01_ctl00_btnSearch" src="/store/buttons/Theme5/btnGo.gif" align="absmiddle" style="border-width:0px;" />
   
</div>
    <div id="ctl06_ctl01_ctl00_dvControlFooter" class="ControlFooter"></div>   
</div>
</div>
</td>

                                <td valign="top" style='width:0' class="LayoutContent">
                                    <div class="LayoutMiddleBreadcrumbs"></div>
                                    <div class="LayoutMiddleMessage"></div>
                                    <div class="LayoutMiddleBody">

<div style='clear:both;width:;' id='LayoutControlContainer112'><table width="100%" border="1"><tr><td>This is a test</td></tr></table></div>

                                    </div>
                                    <div class="LayoutMiddleBottom"></div>

                                </td>
                               
                            </tr>
                   
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        
<div class="LayoutBottom"><table width="100%" border="1"><tr><td>This is a test of the footer</td></tr></table></div>

                       
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

I had to dig this out of my full HTML page, so if you think I'm missing something, just let me know. Sorry, but the CSS file itself is a little "inaccessible", because of it being within a CMS and the fact that these pages aren't live. I can try and take out whatever you need though:-)

[Tlhokomelo]

Did I mention that IE sux! Why they haven't started to become CSS compliant until recently is beyond my comprehension...

I had to dig this out of my full HTML page, so if you think I'm missing something, just let me know. Sorry, but the CSS file itself is a little "inaccessible", because of it being within a CMS and the fact that these pages aren't live. I can try and take out whatever you need though:-)

Don't look at it like that (IE that is), rather look at it as a challenge because, it! A large percentage of people are still running IE (some if not most of them don't know any better - they are probably into travel and mining industries). Therefore it is still your responsibility to make sure that they don't suffer because their browser maybe running some dodgie mosaic code (long story!)
or whatever else, you should make websites for people and not for browsers, it is part of the job my fellow good person :S

I don't know what CMS you are using, so I can't tell you what to do there :( but you should be able to change the css somehow (It might be embedded in a php file or maybe an asp document - go though your cms docs) ...

I've read of a number of very interesting articles on layouts and other issues, the trick is to search around for some more information. I guess you just want a quick answer but my opinion is that, you need to think about your problem clearly, plan a basic algorithm to solve it, search around for something similar to your plan and you should find just what you need.

[MidiMagic]

You can embed styles into the tags themselves with the style="..." attribute. Example:

<p style="text-align: center;">
 text
</p>

[omol]

Ok, your complaining about ie sucking yet your still using tables for layout?

Anyway. The best thing you can do is float the fixed sized element left, postion the liquid element as relative and align top minus pixels of the height of the static element and then use margin-left to push the liquid element away from the fixed sized element. That looks like one hell of a poorly coded CMS, if that was one of my cleints with a site coded like that and they wanted a template i would be seriously considering telling them that there using an old outdated CMS and you need to implement a new one.

The empty divs you have will come in useful for image replacement, you can probally also use them to separate other elements.