DIVs? Tables? Which one...???

mersyone

mersyone

Registered
Hey all,

It's happening again! I keep encountering this same issue everytime - I'm talking about the div & table tag usage for LAYOUT STRUCTURE & ALIGNMENT ISSUES. I use to use nothing but <table> & <td>s' (back in the day) until I found out about the DIV. But sometimes, out of frustration, I get "DIV happy" and then next thing I know the whole thing is A MESS!

So I'm wondering if any experts out there can give a few pointers to a "use-to-be" PRINT man "now-converting-to" WEB man;...

specifically...
IS IT OKAY TO WRAP A TABLE IN A DIV TAG???
WHEN SHOULD I "NOT" USE DIV TAGS? ...TABLE TAGS?

The site I am working on is @ http://www.rockstransportation.com/rocks2.html.
*As you can see, the RIGHT SIDE COLUMN is completely out-of-wack!!!
And in IE, I can't even get the damn thing to show.

(btw, I did do a search but half of the results where in favor and half weren't. ...so I came here.)

thanks.
 
Hello mersyone, welcome to the byte side (get it? get it?!)!

Officially, tables should only ever be used for data and never for layout. There is no debate about whether or not DIVs are better than tables -- they are -- it's a debate about whether its worth the effort to learn how to layout with CSS. In my opinion, yes it is.

Yes it is OK to place a table in a DIV tag, provided that table is there to represent tabular data. It's not OK, however, to place a LAYOUT table inside a DIV tag (as you have with your navigation), because it defeats the purpose of using CSS for layout in the first place.

EDIT: when I say it is "OK"/"Not OK", i mean it is OK or not OK in relation to the Web standards. If you are not interested in standards compliance, then just use whichever method you feel comfortable with, whether that be DIVs, tables, flash or duct tape. I am one for promoting standards compliant code, but you don't have to :)

the reason why the right column is underneith is because there is not enough room to the right of #mainBody to accomodate it. Changing the width property of #mainBody in your CSS fixes this (currently set to 600px. I tried 550px and it snapped into place).

However there are other problems with the site -- I"m not getting any image at all in Safari, most likely due to invalid code. Check all your opening and closing tags, and ensure all comments are properly opened/closed. Use the W3C validator to help with this.

You site looks great btw :) The code underneath is just a little bloated. Simplifying it should make things a little easier.
 
Thank The Cheese said:
Yes it is OK to place a table in a DIV tag, provided that table is there to represent tabular data. It's not OK, however, to place a LAYOUT table inside a DIV tag (as you have with your navigation), because it defeats the purpose of using CSS for layout in the first place.
Click to expand...

Hey thanks for the very informative post! Trying to do layout with CSS is "dark water" to me and so I usually stay 10' feet away from it (since it always messes things up). I use it entirely for formatting. Fior layout >> I'm a "TABLES" man. I've just gotten so use to it, that's all.
Aside from the updating flexibility, DO YOU FEEL IT'S WORTH TRYING TO LEARN TO LAYOUT? (just curious)

And so, ...I went ahead and RE-DID IT (since you mentioned Safari won't even display it! ...ouch!!!)

You can take a look at this NEW! one @
http://www.rockstransportation.com/rocks_new.html

...It actually shows up in IE (yay!). But, in MOZILLA, ....again,....it goes "out-of-wack!" and objects stick out the right side. Sorry to say, I did lay it out with tables (mostly). you have definitely made me reconsider though.

Thank you again & tell me what you thin of the new one, ...when you have time of course
 
well i took a quick look and the problem is you used a Div tag for the sideNav and set its width property to 180px but your images inside the div tag are 198px wide. Div tags dont automatically resize like a table tag does if the content inside is bigger then the set width.

#sideNav {
width: 200px;
float: right;
position: relative;
background: #4B5254;
font-size: 14px;
}
 
Pardus said:
well i took a quick look and the problem is you used a Div tag for the sideNav and set its width property to 180px but your images inside the div tag are 198px wide.
Click to expand...

I caught that part, so that's fixed. Most of the other bugs are fixed as well.
(and it only took me 2 tries this time...!). I ended up nesting 2 tables in one large one and then wrapping that whole entire thing with a <div>. LIKE SO:

<div>
...<table #0>
......<tr>
.........<td>
............< table #1>
............</table #1>
............< table #2> <------SIDE COLUMN!
............</table #2> <------SIDE COLUMN!
.........</td>
......</tr>
...</table #0>
</div>

It might be a bit on the heavy side. But hey, ...at least it's not breaking.

I uploaded a newer version at - http://www.rockstransportation.com/rocks_new.html
As you can see, ...there are some very small bugs to work out.
HEY, DO YOU BY CHANCE KNOW HOW TO GET THE BOTTOM'S OF x2 COLUMNS TO LINE-UP?

Either or, thankx man. I checked out your site/s. Very impressive stuff!
...That your company?
 
ok a few things i noticed. One is that the padding is to big on the user login style:
#main #sideNav #userLogin {
background: #64787D;
border-top: 2px solid #999999;
border-bottom: 2px solid #CCCCCC;
padding: 10px 10px 30px 20px;
font-size: 11px;
color: #FFFFFF;
}

the left and right padding is too big, it seems ok in my browser but in Dreamweaver it makes the sidenav table 224px and effectively drops it below the main table. when i reduced the padding, especially the left one you had at 20, that fixed it. also you might want to reduce the login text box size as that will render differently on various browsers.

You also need to clean up your tag attributes. If you are using CSS you shouldn't apply attributes directly to tags. you seem to have properties in the various table tags and then also have asigned a style to them. stick with only CSS to apply styles otherwise you are going to get all sorts of problems.

Now with the mainbody and sidenav. delete those Div tags, they do nothing and you dont need them. second having table 1 and 2 inside one TD tag is just asking for problems, instead just use 2 td tags. you can either style each td tag or put a table in each one.

original
<div>
...<table #0>
......<tr>
.........<td>
............< table #1>
............</table #1>
............< table #2> <------SIDE COLUMN!
............</table #2> <------SIDE COLUMN!
.........</td>
......</tr>
...</table #0>
</div>

Change to:
...<table #0>
......<tr>
.........<td id="mainBody">
.........</td>
.........<td id="sideNav"> <------SIDE COLUMN!
.........</td>
......</tr>
...</table #0>

if you do that, then they both have to be the same hieght and you can set the background color of each

hope that helps. try and keep your code as simple as possible and when you build the template, be sure to use an external style sheet instead.
 
Pardus said:
Change to:
...<table #0>
......<tr>
.........<td id="mainBody">
.........</td>
.........<td id="sideNav"> <------SIDE COLUMN!
.........</td>
......</tr>
...</table #0>

if you do that, then they both have to be the same hieght and you can set the background color of each
Click to expand...

Sh*%. The side nav is still dropping on your end?, ....crap.
Yeah I only used the DIV tag to center the whole body, other wise the whole body part (body & side nav column) are shifted to the left.
Thankx. I'm printing out your response and will give it a whirl later today.

How can I re-pay you? I'm thrilled to have your expert advice.
Thankx again.
 
Kay,

So everything is pretty solid I can start seeing that.
HOWEVER, ..I don't know why my Footer is not showing up.
Also, in IE, ...it crashes.

I only placed the div there to center the whole main body and column, and that's because I don't know of any other way to get it aligned right.
so,...I broke something, back to the drawing board.
(Am I suppose to place x2 tables within each of the <td> tags? That part I didn't quite understand).

Well, I feel I am getting closer at least.
When you can, check it out.

NEW ONE @ http://www.rockstransportation.com/rocks_newXXX.html

I've also attached screenshot of overall structure.
screenshot.gif
 
ok well there are a few different ways of doing this but I think for now, you should stick to tables instead of Div tags as tables are generally more predicatble in how they render.

So, first off, I rewrote you source code and started with the basic layout. A single centered table with 3 rows, one for the header, the body and footer. from there, I inserted nested tables for the content.

I cleaned up the css and rest of html a little bit. take a look and see what you think.
 

Attachments

  • test2.htm.zip
    4.5 KB · Views: 2
Thank you Pardus. The site is working "FLAWLESSLY" now.
Take a look at http://www.rockstransportation.com/rocks.html

I didn't know you can center the whole dang thing with a simple <center> tag. Ha!!!...well like I said, I am a newb. I've been teaching myself this stuff so I'm sure there are some essential basics that I'm not aware of.

Seriously, thank you. I've always encountered this same problem and you've just solved it. If you'd like, I can add your name and website to the "Links & Friends" section as a small gesture of gratitude. Just give me the "go ahead". If there is anything else I can maybe do, just remember I owe you one.

I've already started to build out the other pages. This is great!

...you are "the man". Thank you.
 
glad to hear its working out. sure you can add my link to your site, thanks.

Are you building a dreamweaver template for the other pages? If not, it is something you should really consider. I use templates for pretty much all my sites and it makes updating so easy. For instance, if you use the template, you can add and remove things from footer or nav bar and only have to update it on the template and all the linked pages update as well.

Anyway, if you need anymore help let me know.
 
I'm actually using some very basic PHP 'includes' code to handle the easy updating part. I've tried using templates a couple times, ...just couldn't figure it out I guess.

SO BASICALLY, All I'm doing is...
--------------------------------------------------------------
<?php include_once('./includes/header.html'); ?>

<!--//////////////////////////// END - HEADER ////////-->


<!--///// START - MAIN NAV //////////////////////////-->
<?php include_once('./includes/mainnav.html'); ?>

<!--////////////////////////// END - MAIN NAV ////////-->
etc.
etc.
---------------------------------------------------------------
Hey when you get a chance, check out any NEW! progress at -
http://www.rockstransportation.com/home.php
ALL the links work there with the exception of 2 more.
Once they're done (within the week), I'll just rename the "home.php" to "index.php".
Then it's LIVE!

I am more than happy to give you any credit you want.
For your link, I'll post as:
eBrochures - essential marketing tools for a successful small business!
www.e-brochures.ca.

PatherMedia Internet Solutions - design, advertising, promotion
www.panthermedia.com

If you'd like anything different, let me know.
Hey check out my portfolio site @ http://www.metamorph-x.com/resumes/v4.00/
We should talk business sometime.
 
You must log in or register to reply here.
Back
Top