Greetings! I'm self-taught (i.e. amateur) website designer. I've built a few basic web sites for myself and friends. I'm currently designing a site for my sister, and have a basic working model uploaded using tables as the primary structure:
http://www.kecsvcs.com
I know it's better to use CSS, and my challenge is to do the entire site with no tables, and have it display uniformly on IE, FF and Opera, but I can't seem to get past a few hurdles:
I want the white left and blue right columns to stay equal length. The length of the text content in the left-hand white column will vary.
Using only
one table and the rest CSS, I can do that:
http://www.kecsvcs.com/test/services.htm -- as either column would grow, the other one keeps up with it, using the appropriate background-color for the column.
However, using only CSS I cannot get the columns to stay equal length:
http://www.kecsvcs.com/test/index.htm is an example where the left column is longer, but the right one stays stunted, and
http://www.kecsvcs.com/test/qb.htm is an example where the right column is longer, but the left one stays stunted.
For these examples, I left the background-color as orange, and it shows as such in IE, but in FF and Opera what I expect to show orange is transparent.
I'm using IE6, FF2.0 and Opera 9.2 for my test.
Is there a way to keep parallel columns an identical, but flexible, length using CSS like they do with tables?
And, one other niggling problem (in IE only): Using the CSS-only layout, I cannot put a 240px-wide img in a 240px-wide container. The widest it will accept is 237px. (In the right-hand blue column, I need to specify a <238px size for the "logo_blue_bg1.gif" graphic, or the whole container no longer floats to the right, it moves to beneath the other column.) Any workaround for that?
