Trying to use not tables, only CSS, but can I?

Question

wpcoe 0 Newbie Poster

19 Years Ago

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:

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: -- 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: is an example where the left column is longer, but the right one stays stunted, and 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?

html-css user-interface web-design

6 Contributors
18 Replies
186 Views
1 Week Discussion Span
Latest Post 19 Years Ago Latest Post by justinm

Dani AI

Generated 6 Months Ago

Good call on avoiding layout tables — that keeps the markup semantic (as pushed) and helps accessibility. The “faux columns” approach you discovered is a perfectly valid, lightweight CSS-only trick for fixed-width pages: it fakes equal-height columns by painting two backgrounds. It degrades nicely and avoids JS, but it ties you to pixel offsets (so it is not ideal for responsive or variable-width layouts). ’s clearfix advice is also useful for the float-wrap problems you saw.

If you want equal-height visuals but more flexibility, two practical options are simple and robust:

Float-based, explicit widths (works in very old browsers): float both columns or reserve the right-column space with a fixed width/margin so the browser never has to squish things.
Modern CSS: use flexbox or grid to get true equal-height columns without hacks.

Example (minimal) CSS illustrating both ideas:

/* float-based (old browsers) */
.container { width:800px; margin:0 auto; }
.left { float:left; width:calc(100% - 260px); padding:20px; box-sizing:border-box; }
.right { float:right; width:240px; padding:20px; box-sizing:border-box; }

/* modern (preferred) */
.container { display:flex; }
.left { flex:1; padding:20px; }
.right { width:240px; }

About the “237px vs 240px” image problem: that’s a layout math issue, not a mysterious IE bug. Your container width minus the left column’s width plus its horizontal padding/margins/borders left only a couple of pixels of room. If the right block (or its image) is even a few pixels too wide it drops below the float. Fixes: give the right column an explicit width and float it, use box-sizing: border-box so padding is counted inside the width, make images display:block and max-width:100%, or switch to flexbox/grid so the browser handles heights/space automatically. Finally, keep alt text and semantic markup (as recommended) and test in the oldest browser you need to support — if IE6 support is required, faux-columns or a tiny JS equalizer are acceptable fallbacks.

All 18 Replies

MidiMagic 579 Nearly a Senior Poster

19 Years Ago

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:

.cenimg {text-align: center;
         margin-top: 0px;
         margin-bottom: 0px;
         padding: 0px;}

.imgcen {clear: both;}

....

<div class="cenimg">
<img src=..... class="imgcen">

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.

DanceInstructor 19 Posting Whiz

19 Years Ago

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:

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.

wpcoe 0 Newbie Poster · Answer 1 · 2007-03-21T05:09:07+00:00

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

VanPetrol 0 Light Poster · Answer 2 · 2007-03-22T11:21:08+00:00

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

wpcoe 0 Newbie Poster · Answer 3 · 2007-03-23T12:30:03+00:00

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:

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

rgtaylor -2 Junior Poster in Training · Answer 4 · 2007-03-23T13:32:26+00:00

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

wpcoe 0 Newbie Poster · Answer 5 · 2007-03-23T23:12:32+00:00

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.

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.

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

Thanks for the offer, you may be hearing from me. <g>

Cheers & thanks again to everybody for your replies!

rgtaylor -2 Junior Poster in Training · Answer 6 · 2007-03-24T15:00:38+00:00

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

wpcoe 0 Newbie Poster · Answer 7 · 2007-03-25T00:09:37+00:00

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 )

rgtaylor -2 Junior Poster in Training · Answer 8 · 2007-03-26T09:29:04+00:00

We could comment better if you showed us a code sample so we could understand exactly how you implemented it, rather than assuming things from your post above.

However, one danger here is the term "fixed width"... if you want to fix widths, there are a large number of ways to implement it, but then you need to design with 2 caveats....

1, it should be centered in the screen or it will look bad...

2, it should be designed to look good on the smaller screens

there is also a 3rd issues which should be considered...
make the site's left and right have some kind of boarder to differentiate it from the huge amount of white space that I will see on my screen when I view the site...since my PC is set to 1680 x 1050...
just look at this forum site's left and right on a large screen to get the idea...

wpcoe 0 Newbie Poster · Answer 9 · 2007-03-26T10:11:49+00:00

We could comment better if you showed us a code sample so we could understand exactly how you implemented it, rather than assuming things from your post above.

That's why I included the link ( www.kecsvcs.com/test ) in the previous message. To see the code, just view the source in your browser. Perhaps wrongly, I thought that would be better than filling the forum with the different page's sources and the CSS style sheet?

However, one danger here is the term "fixed width"... if you want to fix widths, there are a large number of ways to implement it, but then you need to design with 2 caveats....
1, it should be centered in the screen or it will look bad...
2, it should be designed to look good on the smaller screens

It is centered and I sized it at 640px wide, realizing that 640x480 screens would need to scroll a little bit. I also realize that not all users with 800x600 resolutions and above will be viewing full-screen, but thought 640px wasn't too wide?

there is also a 3rd issues which should be considered...
make the site's left and right have some kind of boarder to differentiate it from the huge amount of white space that I will see on my screen when I view the site...since my PC is set to 1680 x 1050...
just look at this forum site's left and right on a large screen to get the idea...

Hmmm. What type of border? Is the background pattern I used adequate, or did you have something else in mind?

Ok, what the heck, here's all the source code and my style sheet. Happy scrolling!

style1.css

html { overflow:scroll;}

#Content {
    width:640px;
    margin:5px auto;
    background:#fff url(col_blue_bg.gif) repeat-y 400px 0;
    padding-bottom:0px;
    line-height:0px;
    font-size:1px;
 }

body {  background:url(bg.gif);
    font-family:Arial, Tahoma, Sans-serif;
    background-color:#fff;
    font-size:14px;
    LINE-HEIGHT:130%;
    text-align:center;
 }

em {font-weight:bold; font-style:italic;}

img {padding:0; margin:0; border:0;}

.menu1on  {
    background:url(button.gif);
    display:block;
    padding-top:12px;
    padding-bottom:12px;
    color:#fff;
    border-bottom:1px solid #fff;
 }

.menu1 a
{   background:url(button.gif);
    display:block;
    text-decoration:none;
    padding-top:12px;
    padding-bottom:12px;
    color:#fff;
    border-bottom:1px solid #fff;
 }

.menu1 a:hover, .menu1 a:active, .menu1 a:focus
{   background:url(button_press.gif); }

.menu1 ul {margin:0; padding:0; list-style-type:none;}

.menu1 li  
{   float:left;
    text-indent:0;
    width:20%;
    font-size:16px;
    line-height:16px;
 }

.leftcolumn
{   width:317px;
    float:left;
    color:#000;
    text-align:left;
    line-height:18px;
    font-size:13px;
    padding:40px;
    border:0;
 }

.rightcolumn
{   color:#fff;
    font-size:13px; 
    font-style:italic;
    line-height:18px;
    padding-top:70px;
    padding-bottom:20px;
 }

.rightcolumn img {padding-bottom:40px}

.title1 {font-weight:bold; font-size:20px; line-height:120%;}

.title {font-weight:bold; font-size:20px; padding-left:40px;}

.title2 {font-weight:bold; font-size:20px; margin-bottom:20px; text-align:center;}

.service
{padding:0; line-height:16px; font-size:12px; text-align:left;}

.servicehead
{ background-color:#ffe599; line-height:16px; font-size:12px; 

display:block;
font-weight:bold; width:300px; padding:10px 0 10px 0; margin:0 auto 10px auto;}

.service ul {margin-top:0;}

index.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us">
<head><title>Welcome to KEC Bookkeeping Services, San Diego</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="robots" content="index,follow">
<link href="style1.css" rel="stylesheet" type="text/css">

<BODY><div id=Content>

<img src=logo_banner2.gif alt="KEC Bookkeeping Services, San Diego, QuickBooks expert">
<div class=menu1>
<ul>
<li class=menu1on>Welcome
<li><a href=services.htm>Services</a>
<li class=menu1on>&nbsp;
<li><a href=qb.htm>QuickBooks</a>
<li class=menu1on>&nbsp;
</ul></div>

<div class=leftcolumn>

<span class=title1>Welcome to KEC Bookkeeping Services Online</span><br>

<p><b>Dear Small Business Owner:</b>

<p>Hello!  My name is Kathy, and I own and operate <b>KEC Services</b>, a small bookkeeping firm here
in San Diego.

<P>With over <em>30 years experience</em> in the field &ndash; including 15 years in the automotive field and 10 years with enrolled agents &ndash; I enjoy bookkeeping and working to help <em>small businesses</em> like yours.</P>

<P>My services are offered on a <b>part-time</b> (temporary or permanent) basis &ndash; as an <em>outside consultant</em> &ndash; to help you and your clients. <em>Flexible scheduling</em> is basic to my business &ndash; I even offer <em>free pickup and delivery!</em>

<P>Whether you have one, or several, employees or clients, if you need assistance preparing
<em>financial statements, payroll </em>or <em>bill paying</em>, my expertise and experience can work for you.  I can work with you "behind the scenes" or directly with your clients.</P>

<P>Please give me a call when you or your clients need any help.  I look forwarding to helping you!

<P>Sincerely,

<p>
K. E. Coe,<br>
Owner
</div>


<div class=rightcolumn>
<img src=kec7.jpg width="180" height="255" alt="Kathy, owner, KEC Bookkeeping Services, San Diego">

<img src=logo_blue_bg1.gif width="237" alt="KEC Bookkeeping Services, San Diego, QuickBooks expert">

1666 Garnet Avenue, PMB #601<br>
San Diego CA   92109-3116
<p>(619) 285-1828<br>
fax (858) 273-0588<p>
e-mail: <a style=color:white href="mailto:kecsvcs@aol.com">kecsvcs@aol.com</a>
</div>
<div style=clear:both></div></div>

</BODY></HTML>

services.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us">
<head><title>KEC Bookkeeping Services</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="robots" content="index,follow">
<link href="style1.css" rel="stylesheet" type="text/css">

<STYLE type="text/css">

.support 
{   width:160px;
    background-color:#fff;
    color: #00f;
    text-align:center;
    padding:0 20px 0 20px;
    font: 26px Arial, Helvetica, sans-serif;
    font-weight:bold;
    line-height:30px;
}

.counton
{   position:relative;
    margin:auto;
    margin-top:-6px;
    width:225px;
    background-color:#f00;
    color:#fff;
    text-align:center;
    padding:4px 20px 4px 20px;
    font: 18px Arial, Helvetica, sans-serif;
    font-weight:bold;
    display:block;
}

.leftcolumn {width:367px; padding:40px 20px 20px 10px}

ul { list-style-type:square; }

</style></HEAD>
<BODY><div id=Content>

<img src=logo_banner2.gif alt="KEC Bookkeeping Services, San Diego, QuickBooks expert">
<div class=menu1>
<ul>
<li><a href=index.htm>Welcome</a>
<li class=menu1on>Services
<li class=menu1on>&nbsp;
<li><a href=qb.htm>QuickBooks</a>
<li class=menu1on>&nbsp;
</ul></div>

<div class=leftcolumn style=text-align:center;>

<div class=title2>KEC Bookkeeping Services</div>

<div class=servicehead>ACCOUNTING</div>

<div class=service>
<div STYLE="float:left; width :50%;">
<ul>
<li>Invoicing
<li>Bank Reconciliation
<li>Cash Receipts
<li>Cash Disbursements
<li>Accounts Receivable
<li>Accounts Payable

</ul></div>

<ul>
<li>General Ledger
<li>Payroll and Reports
<li>Preparing Financial Statements
<li>Sales Tax Reports
<li>New/Used Car Sales Journals
<li>Service/Warranty Sales Journals
</ul></div>

<span class=servicehead>GENERAL OFFICE</span>

<div class=service>
<div STYLE="float:left; width :50%;">
<ul>
<li>Telephone
<li>Typing/Filing
<li>Cashier

</ul></div>

<ul>
<li>Inventory Control
<li>Staff training
<li>Office Organization
</ul></div>

<span class=servicehead>COMPUTER</span>
<div class=service>

<span style="text-align:left; float:left; padding:0 35px 0 40px; width:30%;"><i>General Programs</i></span>

<span style="text-align:left; font-style:italic;">Accounting</span>

<div style="float:left; width:50%;">
<ul>
<li>WordStar
<li>WordPerfect
<li>Microsoft Word
<li>CalcStar
<li>Lotus 1-2-3
<li>Quattro Pro
<li>Excel
</ul></div>

<ul>
<li>TCS
<li>Dimensional Software
<li>Business Works
<li>OWP Plus
<li>Quick Books
<li>Quicken
<li>CFS Payroll/Sales Tax

</ul></div>

<div style="padding:10px 0 0 0;">
<span class=support>SUPPORT</span>

<span class=counton>YOU CAN COUNT ON</span></div>

</div>

<div class=rightcolumn>

<img src=kec7.jpg alt="Kathy, owner, KEC Bookkeeping Services, San Diego" width="180" height="255">

<img src=logo_blue_bg1.gif alt="KEC Bookkeeping Services, San Diego, QuickBooks expert" width=237>

1666 Garnet Avenue, PMB #601<br>
San Diego CA   92109-3116
<p>(619) 285-1828<br>
fax (858) 273-0588<p>
e-mail:<a style=color:white href="mailto:kecsvcs@aol.com ">kecsvcs@aol.com</a>

</div>
<div style=clear:both></div>

</div>
</html>

qb.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us">
<head><title>KEC Bookkeeping Services QuickBooks</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="robots" content="index,follow">
<link href="style1.css" rel="stylesheet" type="text/css">
<STYLE type="text/css">

.constr {padding:85px 0 85px 80px; font-style:italic; color:#f00;}

.constry {background-color: #ffe599; padding:105px 0 115px 80px; font-style:italic; color:#00f; margin:0}

.leftcolumn {padding:40px 0 20px 0; width:397px;}

</style></HEAD>

<BODY><div id=Content>

<img src=logo_banner2.gif alt="KEC Bookkeeping Services, San Diego, QuickBooks expert">
<div class=menu1>
<ul>
<li><a href=index.htm>Welcome</a>
<li><a href=services.htm>Services</a>
<li class=menu1on>&nbsp;
<li class=menu1on>QuickBooks
<li class=menu1on>&nbsp;
</ul></div>

<div class=leftcolumn>
<span class=title>Intuit QuickBooks<sup>&reg;</sup></span>

<h3 class=constr>  Under Construction ...<br> please check back later!</h3>
<h3 class=constry> Under Construction ...<br> please check back later!</h3>
</div>

<div class=rightcolumn>
<img src=kec7.jpg width="180" height="255" alt="Kathy, owner, KEC Bookkeeping Services, San Diego">

<img src=logo_blue_bg1.gif width="237" alt="KEC Bookkeeping Services, San Diego, QuickBooks expert">

1666 Garnet Avenue, PMB #601<br>
San Diego CA   92109-3116
<p>(619) 285-1828<br>
fax (858) 273-0588<p>
e-mail: <a style=color:white href="mailto:kecsvcs@aol.com">kecsvcs@aol.com</a>
</div>
<div style=clear:both></div></div>

</BODY></HTML>

justinm 0 Newbie Poster · Answer 10 · 2007-03-28T10:04:09+00:00

We could comment better if you showed us a code sample so we could understand exactly how you implemented it, rather than assuming things from your post above.
However, one danger here is the term "fixed width"... if you want to fix widths, there are a large number of ways to implement it, but then you need to design with 2 caveats....
1, it should be centered in the screen or it will look bad...
2, it should be designed to look good on the smaller screens

there is also a 3rd issues which should be considered...
make the site's left and right have some kind of boarder to differentiate it from the huge amount of white space that I will see on my screen when I view the site...since my PC is set to 1680 x 1050...
just look at this forum site's left and right on a large screen to get the idea...

true, you can desgign fixed width websites without needing to be centered, just preferred left aligned, and at least 800wide.

best sizes these days are 800-1024 wide, and a lot of sites that are centred are referring to pixel borders, and curved edges, adding to size. The only time percentages are needed in fixed width is when you expect the size of the page to be resized (i.e. small resolutions, windowed browsers etc.), but other than that you shouldn't use % unless you are using tables, and you want to force the width of one cell to its maximum width which can change depending on content in other cells. But still use fixed width for flow.

rgtaylor -2 Junior Poster in Training · Answer 11 · 2007-03-28T10:26:28+00:00

fixed width website that are left aligned, 1) shows Eurocentric design 2) still looks bad on large screen compared to a centered page...

CSS has a minHeight and minWidth and maxHeight and MaxWidth properties but they are not well supported yet...

I have used JS to simulate these functions in some sites, where JS calculated based on document.body.clientHeight and document.body.clientWidth... This way I can have minimum and maximum sizes, within this range I can handle things 1 way and outside these paratmeters I can handle things a different way... i.e. very tight screens become fixed width and very wide screen become fixed width, within the range I may have fixed width components with the page overall being % sizes... % sizes are specially valid when you have say 3 columns, 1 fixed (i.e. menu) and two variable which should share 50/50 or 60/40 etc. the remaining space...

I agree that you should probably code for 800x600 not too many people are using 640x480 anymore, most new machines won't even support that size anymore...

Also, I always expect users might resize my pages... if you don't think so, think again...

wpcoe 0 Newbie Poster · Answer 12 · 2007-03-28T16:26:09+00:00

In my particular case, my sister's bookkeeping site, I considered what her clients might be using, and figured they probably are not state-of-the-art web geeks, and may well have older computer equipment. If they were high-tech and up-to-date on things, they probably already have their own bookkeeping/accounting software and/or accountant. I believe most of her existing clients are non-tech savvy, and that's the target profile I was aiming for, someone who might one day Google "bookkeeper San Diego" and come across her site. (SEO is another of my future projects.)

My main point of resistance at using JS, was that if they are using IE with default settings, which they I'm pretty sure they would be, they have to click three times to view site content:

once on the IE pop-up banner to get the menu,
once on the menu item to "View Blocked Content" and
once to clear the Security Warning dialog box

That's a lot of effort and doubt in the mind of an inexperienced internet user. The original "warning" could be enough to steer them clear from even viewing her site. "Why risk opening a virus-laden site?" is what they might be thinking.

If I were desiging a web site for, say, Epson Printers, I would probably assume a higher level of web sophistication and experience, but not for this site.

That said, I decided to hope that they were all at least at 800x600, but chose a size that wouldn't look *too* bad on 640x480.

OK, back to my current concern, using the "faux columns":

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.

Thanks for the great ideas and discussion so far!

justinm 0 Newbie Poster · Answer 13 · 2007-03-28T16:28:20+00:00

I do also expect users to resize my pages, however I prefer it if the information does not get squashed or mangled/deformed. When I design something, I design it a specific way, and I dislike the fact of it looking, well ridiculous when the screen is resized to 300x200.
I do agree on % for content, I do still use it in that fashion, but primarily for expanding content. I am still learning CSS (I like div overflow, very nice!), but I am becoming rather efficient at developing sites without aids from either dreamweaver, or internet resources.

I do design in dreamweaver, and the only reason I do is because of color coding. I don't really bother about page validation or visual designs in dreamweaver (they usually are wrong/look wrong), and dreamweaver has the tendency to throw in some bs code too. Delete the header, redo it and your good :)

800x600 is just the go at the moment, it will be 1024x768 in at least 2-3 years once most computers have upgraded/improved resolutions. I don't know about Vista, but I would assume its default resolution to be 1024x768 or larger, and then again I could be wrong...

But the biggest thing I dislike, is IE. I hate that browser with a passion. BS <!--[If IE]-> statements, why can't Microsoft just design something that adheres to accepted standards for a change instead of being different. FF > IE, and its only 5mb, compared to IE's wonderful 70-80 odd...

rgtaylor -2 Junior Poster in Training · Answer 14 · 2007-03-29T09:10:05+00:00

Hey, I will look at what you have provided to see if I can find any serious problems with the method...

If you are using CSS and HTML and you are sure to include the "alt" etc. parameters for non-visual clients then you should have relatively few issues with accessibility.

The #1 problem on the web with regard to accessibility is the rampant use of tables for layout control...

#2 is lack of tooltip text and alternative text for links and images, respectively.

It is nice that you are concerned with accessibility, since so few people can think past their own browser for access issues...

If I find anything I will post a reply...

Good luck and happy coding ;-)

rgtaylor -2 Junior Poster in Training · Answer 15 · 2007-03-29T09:37:35+00:00

I agree with your take on IE, in fact I setup FF as the default browser in all my machines... I just got a new Laptop at work Tuesday this week and the first thing I did, after setting up the network connection of course, was to install the latest verision of FF.

My other Laptop has FF, IE & Opera, I use the others just to ensure that the thin clients my company builds look correct in all 3 browsers... we have a policy of coding for commonality... We do not support custom code for specific browsers, and we talk our customers out of when they ask...

Customers like the "cool" things may be done on some browsers, but when they realize the added cost of coding that way, and the loss of market exposure by introducing atrificial limitations, they usually don't feel it is worth the real costs to do it... they usually agree to a standards compliant, similar / functionally compatable method.

I use an editor with good text highlighting, color coding, and code completion for several langauges, including CSS, HTML, Java, JSP, PHP, Perl, C, C++ etc... It is extensible so I can add more if I need to...

It has 2 preview options, 1 previews in a pane in the application but uses the PC's browser engine to do the rendering... the other launches the browser separately loading the code... it does this even if you haven't saved it yet, which is a cool feature... once it looks right in your preferred browser you can save and then launch manually into any other browser, of course...

The first thing I do when I get a code file that was wirtten with poor format is to remove all the tabs... by selecting all the text and pushing shift+tab until everything is flush to the left... then I reformat the code while I read it, so I 1) understand the code completely and 2) fully understand the layout and placement of each part...

When I am done with my first read through, the page is format the way I prefer...

As for old machines, if they have old PCs they may have old browsers, if they have old browsers, they won't have the default IE JS blocking function....

I worked with a customer who is a MAJOR insurance/financial market leader... can't say names... they have about 15,000 PCs in their main business offices alone... They wanted to upgrade their thin client applications to my latest versions... BUT, the deal was eventually postponed indefinitely, because their machines are STILL Windows 98.... They can't even use the modern browsers... They started a plan to upgrade, but that plan was going to take several years to complete the upgrade alone.... They should be done late this year or early next year... THEN, I can talk to them again about moving ahead with the upgrade of my systems....

They still had 640x480 on 14" screens all over the place... But that is an extreme case... MOST companies I deal with are using larger than 1024x768, most have a minimum of 1280x1024... I am set to 1680 x 1050 on my laptop... But I always run my tests through 640x480 upto 1280x768... If you want things to look the best for 90% of the market, code for 800x600 and center it... the bigger browsers will just havce varying amounts of border space on the right and left of the content area... which is usually a visually acceptable, if not appealing way...

On my screen right now, this web site has about 4 inches of light-grey on each side of the site content... it doesn't look too bad

justinm 0 Newbie Poster · Answer 16 · 2007-03-29T15:57:28+00:00

640x480 14" damn! that is plain awful!

haha yeah, first thing i do after setting up and installing network is straight away to firefox to get latest version, the MS updates.

Centred is the way to go at the moment with webdesign. Pixelated borders etc. offer a more professional look, shiny orbs offer attractiveness etc. Side aligned can look sloppy, but can also look good depending...

Are you using a program called AceHTML or JCreator?? JCreator Lite is fantastic for Java, C etc. Dreamweaver is a little big, but I suppose its for its cross product support, and its many useless libraries of rubbish that are really needed by beginners only. The inbuilt FTP is very slow :(

I am however interested in the software you use, if it is commercial, free to test, or custom built... :)

Trying to use not tables, only CSS, but can I?

Dani AI

Recommended Answers Collapse Answers

All 18 Replies

Recommended Answers