IE6 CSS Issue w/ 2 Column Layout

JSeverson · #1 (**permalink**) 12-09-2008, 08:41 PM

Hi,
I'm rebuilding a site for a client and I'm running into a problem with the layout in IE6. The layout is 2 columns. The left column is fixed width while the right column needs to stretch across the remaining width of the browser.

The problem that I've encountered with my current code is that when I shrink my browser down, the left fixed frame slides to the right. This is especially the case if you have an 800x600 resolution and you shrink your browser down. I think it has something to do with IE6's lack of support for min-width but no hacks that I've found so far seem to work.

I've also tested the link below in IE7, Firefox 2, Firefox 3, Opera 9.6, Safari 3.1 and Google Chrome. It works perfectly in these browsers.

Anybody know how I can fix this issue?

http://demo.eneagrama.com/sample.html

Thanks!

ami_iss · #2 (**permalink**) 12-10-2008, 08:18 PM

If I understood the problem correctly - You can try a table that takes up the entire width of the screen rather than a <div> which is what you seem to have. The table should have "width = "100%" The left <TD> of this table should have a fixed width that you want. The right TD should have NO width spec at all.
Like this:

<HTML>
<HEAD>
</HEAD>
<BODY>

<table border = "1" bordercolor = "blue" width = "100%"> <tr>
<td bgcolor = "green" valign = "top" width = "150"><font color = "White"><p>Pagina </p> <p>English </p><p>More </p>
<p>fixed width</p><td valign = "top">
<p align = "center"> Text that is spread over the entire page</p></td></TR></TABLE>
</BODY>
</HTML>

I do not have IE6 any more and so I cannot test it. But I have a Web site that works like that more or less, and it was designed before IE6 as I remember and certainly worked right in IE6. In that one it is more complicated, because left and right columns have fixed width and the middle expands and contracts. No problem there. I abandoned this sensible design in most places in favor of 800 X 600 centered pages, because everyone thinks it is more professional looking.

Another solution is to write that this page is best viewed in IE7 or Firefox and give them a link to download the new browser.

<please add your link to your signature>

cbosleeds · #3 (**permalink**) 12-11-2008, 03:09 AM

If you want to do it with div rather than tables, then I'd maybe have a look at the *html hack which allows you to deal with IE separately from other browsers in the CSS. This means that you can leave it as it is for most browsers and just concentrate on fixing it in IE without risking breaking it in other environments.

*html div.myieclass {}

This has enabled me to get out of loads of fixes where web designers didn't check in IE6 prior to release.

jannmirch · #4 (**permalink**) 12-11-2008, 03:53 PM

I know you are trying to get a variable width right column, but if I may play devil's advocate for a bit... It may be easier to simply create a fixed width right column.

This provides the additional advantage of making your page easier to read for those with wider monitors. Once the page width goes beyond a certain width it becomes difficult to follow the text from one line to the next.

JSeverson · #5 (**permalink**) 12-11-2008, 04:05 PM

ami_iss: Thank you for your feedback. However, one of the purposes of rebuilding this site is to convert it to a table-less layout that is standards compliant. So, tables are not an option here.

cbosleeds: Thanks. I think I may have already tried that option but I'll look into it again.

jannmirch: I totally agree with you. The content itself is actually going to fall into a fixed width div that is centered within the variable width right column. I would prefer doing away with this look entirely but the client is stuck on this exact look and will not budge what-so-ever.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Experienced Web Developer offers new niche service for fluid layout and multi column	Dev4u	Services for Sale/Hire	0	11-11-2008 05:36 PM
CSS / Column problem	EmmaGale	Graphics & Design Discussion Forum	9	07-25-2005 07:14 AM
Designing with CSS – Part 4: Creating a Two-Column Layout	WPW_Feedbot	Graphics & Design Discussion Forum	0	12-14-2004 05:14 PM
Left Column vs. Right Column	Bohak	Graphics & Design Discussion Forum	3	12-01-2004 11:07 AM