PDA

View Full Version : Proper use of tables vs improper use



SJP
10-17-2003, 01:20 PM
I ran accross a web-site a while back that I seem to remember them being an advertizing group for a slew of top dog web-sites and one of the requirements to elicit their services is that your code didn't misuse tables. Ever since I've done my very best to avoid them and in my current web-site I only use <TABLE> once. I needed two columns and <TABLE> does the trick. Of course it could be a lot more useful, but I'm weary of going there, because I want to remain within the confines of good coding. Here's my problem. The browser renders a DIV block on the left that only occupies a portion of the screen. How do I tell the browser to use the remaing space on the right (provided it's large enough)? I could do this with images (float:left). Except for one liners like <A HREF=xxxxx></A> browsers just put everything else underneath. So my workaround is to use positioning, but I hate that if I could get the browser to do it for me and tables seem like the only alternative. Anybody else know of this creativity curbing practice?

SJP

jalal
10-17-2003, 01:42 PM
Use float:left with the divs.

Check out www.w3c.org home page, look at the source, to see how they create a page with 3 columns, using only divs and css.

torrin
10-17-2003, 03:46 PM
Using float: left is correct. This is the code I use in my css file (http://torrin.net/torrin.css) for torrin.net (http://torrin.net).


.mainLeft
{
float: left;
margin-left: 0px;
text-align: left;
width: 120px;
}
.mainRight
{
margin-left: 125px;
text-align: justify;
}

In the html file I do this.


<div class="mainLeft">
This is the left column.
</div>
<div class="mainRight">
This is the right column.
</div>

I hope to some day figure out how to do this where the left column isn't a fixed width. Any ideas?

FZ
10-17-2003, 04:39 PM
torrin,

Why don't you use percentage values for the widths? Check this out: http://www.glish.com/css/9.asp

SJP
10-18-2003, 03:01 AM
Thanks Jalal. The source of the W3C homepage wasn't useable, because they use external style sheets. But, it did get me into poking and prodding.

SJP

FZ
10-18-2003, 08:42 AM
SJP,

What do you mean by "wasn't usable"? If it is an external style sheet, you can still download it and have a look at how it works... It's just a bit of extra work since you'd need to compare constantly with the HTML page that is using that style sheet. Here's the one: http://www.w3.org/StyleSheets/home.css and the other one (shown only to newer browsers since it is "@import'd") is http://www.w3.org/StyleSheets/home-import.css.

While we are on the topic, you might want to check out the URL I pasted above: http://glish.com/css/ - it might provide you with some help. Other URLs to check out can be found here: http://forums.westhost.com/phpBB2/viewtopic.php?p=6609#6609

torrin
10-18-2003, 01:47 PM
Why don't you use percentage values for the widths? Check this out: http://www.glish.com/css/9.asp

I'll have to give it a try and see if I like it.

jalal
10-18-2003, 01:55 PM
Hi Fayez

I loved the www.csszengarden.com link... fantastic!

FZ
10-18-2003, 03:37 PM
Cool :D

SJP
10-19-2003, 03:50 AM
Ok FZ. So not so unusable :oops: I think I'll stick to reading the specs and getting it down my way (trial and error - yes that too). I had used float with images so using them with DIV seemed natural. Well not quite. Some of the browsers I test my page on (IE6,Opera 7.11,NS7.1,NS6, and Konqueror 3.03 under Linux) didn't render some things the same way or even put stuff in the right places or led to other bugs or annoyances. I've got an acceptable version now including a fix for a nasty IE and Opera bug where the coordinates of the mouse are not compensated when the user scrolls the screen. Ok. Not the best fix, but it will do for tonight :)

SJP