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?

This is a case where tables are better. And you have even more control when CSS is used with tables.

The main reason to not use tables is to not use them to create margins and borders. Your purpose is a valid use for tables.

If you use the div method with css, be prepared to have the format fall apart if the browser window is not full sized, or if the screen is a different resolution than you designed it for.

I would use 3 tables and one div here. The three tables would be:
1. The buttons
2. The main columns
3. The two columns of services on that page.
I would use the div to center the image, since center is a depricated tag:


I can't access your stylesheet, so I don't know what is in it. You may have a cascade error.

You do have some errors in case.

CSS is case sensitive. If you put "Clam" as the class, but use "clam" in the tag calling it, it won't work.... almost. IE ignores case, in violation of the CSS standard.

Your case differences between html tags can also cause trouble, as the newest standard requires all lowercase tags, and the second newest standard requires the closing tag to have the same case as the opening tag.

Thanks for the great feedback! I didn't realize CSS or HTML were case-sensitive.

I'd kind of figured that a compromise in the hardline "No Tables" stance was going to be the solution, but wanted to know if I were overlooking a workable CSS method.

FYI, depending on which page you want the stylesheet for, you should be able to view them: http://www.kecsvcs.com/test/style1.css and http://www.kecsvcs.com/test/style2.css

Hi!
Send me an email to My_username_here (at) hotmail.com. Can give you some real good book or two (soft copy) that I am using now to learn all the css magic.
cheers

You can do this without tables. Ideally tables should be used only for tabular data. The layout of your site is NOT tabular data. You will want to read up on the css property: clear. There is a nice article here: http://www.positioniseverything.net/easyclearing.html

Thanks for that education. I hadn't been aware of the :after "pseudo-element" and how it worked.

I was able to reverse-engineer the page you linked and apply it to my test page, but it only takes care of half of my goal. I want to be able to have the left column be shorter or longer than the right column, depending on content, and still have it appear to be two columns (with the white background in the left going all the way to the bottom and the blue background in the right also going all the way to the bottom.)

This is where I'm stumped:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>CSS test document</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
<style>

.floatholder {
border: 4px solid #000;
margin: 10px 0 0;
background: #dc8;
font-size: 1.2em;
width:640px;}

.floatbox {
float: left;
width: 35%;
background: #773;
border: 3px solid #f55;
color: #ffd;}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}

.clearfix {display: inline-block;}
</style></head><body>

<div style="border: 4px solid #000;margin: 10px 0 0;background: #dc8;font-size: 1.2em;" class="clearfix floatholder">

<div class="floatbox"><p>See how this float no longer protrudes out of the containing box...</p></div>

<p>This float container has a class attribute of "clearfix", which applies the :after fix, or the Holly hack, depending on the browser.</p>
<p>If the "right column" is longer than the "left column" then the end result is not the desired goal: to appear to be two parallel columns...</p>
</div></body></html>

You can do this with CSS only, and even deal with the image issue... the statement that tables should only be used for tabular data is ABSOLUTELY correct. At the risk of sounding argumentative, the comment about using a table for you layout be valid is "in my opinion" absolutely wrong. The reason tables are not appropriate for page layout is accessibility... you may think the site will not have handicapped visitors, but that is like a Denny's saying no wheelchairs allowed....

#1 Each browser, especially IE, have default values for EVERYTHING a page could style... font-size, padding, margins etc. The only option you have, is to be flexable in design (which is the best choice) or to use a default stylesheet of your own to force all settings to be what you want for all browsers...

#2 I built a sample CSS page for a friend's web developer the other day to use JS and CSS to force column sizes etc. set page heights, and ensure the whole page sized and displayed correctly regardless of the screen resolution or browser that was used.

#3 you will never get 100% equal display on all browsers, or even 2 for that matter, it goes beyond 800x600 vs 1024x768, to the DPI and size of the monitor, default DPI of the platform, MAc & Windows & Linux, Unix are all different... as well as how many tool bars the user has in the browsers, etc...

If you want to discuss these issues directly contact me... I will be happy to share some suggestions...

Peace... and to the guy I offended - remember I said, "in my opinion" so let it go...

You touched on an item that strikes a bit of unease: JavaScript. I know next to nothing about JS, but I suspect it is going to be the key that unlocks my problem.

As JS-uneducated as I am, I've wondered about using JS in a web site if users have security features ratcheted up. I know that many sites I visit with IE6 using default security settings, I get the warning banner across the top about content being blocked and if I want to see it to click there at my own risk. Does that apply to all JS, or just some types, or what? (e.g.I had created a basic photo-album html page in Adobe PhotoShop, and it used JS and would not open in IE without the pop-up warning.) Let's face it, if this site begins to do its job and is located by prospective clients for my sister, I don't want them ignoring the site, wondering if it's a phishing expedition ... or worse. :-|

I'm a dyed-in-the-wool anal-retentive purist, so I clearly hear the call for not using tables except for tabular data.

I also have an auntie who is legally blind who I know uses the internet and while working on this project, I have her in the back of my mind.
Thanks for the offer, you may be hearing from me. <g>

Cheers & thanks again to everybody for your replies!

Yes, the JS blockers will block ALL JS from running. The recent browsers driver me nuts with their default setting of disabled JS. It is something we have to deal with because MUCH of the web's best content require JS. As far as I am concerned you should use the HTML noscript tags to place conditional alert the users must enable JS to view the site, include a promise (and stick to it) that you will not include any blah, blah, blah content and what not...

The noscript contents will be displayed ONLY if they have scripts turned off or their browsers don't support scripting...

JS can be complex, but you really only need some basics for what you are trying to do...

a good search engine and some creative thinking will get you through...

Many tutorial will suggest using screen.height and screen.width but that will yield the machines screen setting 800x600, but will not tell you how big the viewing space for the body content is...

Others will use screen.availHeight and screen.availWidth which subtract permanent or semi-permament components placed by the system, like the status bar.... but this does not actually work well, it doesn't, for example correctly account for the Yahoo or Google tool bar many people will have added to their browsers...

using clientHeight and clientWidth will give the correct amount.... One thing it does not account for correctly, at least not in all cases, it the scroll bars... so just minus a standard amount for them if you think your page will need them...etc...

The results of all these are numbers in pixels, so you can find the clientWidth and minus your desired margins, divid it by the size of the pics, and that will tell you how many pics will fit... then use the results to place each pic with css absolute positioning...

document.getElementById["pic1"].style.top = 100;
document.getElementById["pic1"].style.left = 100;

you can find the rest online, and still feel free to contact me for advice.

Peace

I found a workaround that doesn't sell my purist soul directly to the devil!

I was brushing up on JS tutorials and amongst the pages turned up in web searches, I stumbled across "faux columns" -- which works easily for a two-column layout in a fixed width container. (There are trickier and more challenging workarounds for variable-width containers and for three columns, but this was quite easy.)

Basically, the overal <div> container now has a two-colored background: I used white for the background-color for the left, and a repeating blue graphic for the right: { background: #fff url(col_blue_bg.gif) repeat-y 400px 0; }

The graphic is a 240px X 1px, 46byte file.

I'd appreciate any comments on how this technique dovetails with accessibility and w3 standards. Unless someone can shame me out of using this method, I like it because it avoids tables and JS.

(For the time being you can view how this works at www.kecsvcs.com/test )