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

Question

trbothead 0 Newbie Poster

18 Years Ago

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:-)

cms html-css web-design

4 Contributors
3 Replies
188 Views
6 Days Discussion Span
Latest Post 18 Years Ago Latest Post by omol

Dani AI

Generated 6 Months Ago

— the situation (CMS-generated table cells, no extra wrappers, need IE6+/Firefox/Safari support) is common. Two pragmatic, cross-browser strategies are most reliable: one that keeps the table markup and only uses CSS, and a fallback that uses a floated inner wrapper when module markup permits.

Keep the table; set the left cell to a fixed pixel width and let the table run at 100% so the right cell becomes fluid. Example CSS (add to the site stylesheet or as a small inline style block if the CMS won’t let the main CSS be edited):

.LayoutMiddle { width: 100%; table-layout: fixed; }
.LayoutLeftColumn { width: 220px; }   /* fixed left column */
.LayoutContent { width: auto; }       /* fluid remainder */

If inner-module markup can be edited (wrap module contents in a small div inside the left td), a float+margin approach gives the same visual result without changing the outer table: float the fixed-width inner div left and give the content block an equal left margin. For older IE, trigger hasLayout (zoom:1) or use a small conditional stylesheet to patch IE6 quirks.

Troubleshooting checklist (common causes of “works in Firefox but not IE”):

Confirm a standards DOCTYPE (quirks mode breaks widths and box model in IE).
Remove any inline width:0 on the content cell; that forces collapses.
Watch padding/border — use the same units (pixels) for fixed column and margin.
For IE6 issues add zoom:1 or a tiny IE-only rule via conditional comments.
Test with images/content that don’t overflow the intended width.

Notes: ’s float/margin idea is valid when inner wrappers exist; ’s inline-style tip is a fine fallback when stylesheet access is limited; ’s reminder to design for users not browsers is worth keeping in mind while choosing which technique to use.

All 3 Replies

Tlhokomelo 0 Newbie Poster

18 Years Ago

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 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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

MidiMagic 579 Nearly a Senior Poster · Answer 1 · 2008-08-19T22:12:39+00:00

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

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

omol -2 Junior Poster · Answer 2 · 2008-08-21T23:13:55+00:00

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.

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

Dani AI

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers