CSS Table layout VS CSS DIV Layout (Who is the champion)

either that was 10 years ago, or the person doesn't know what they are talking about.

nobody designs websites with tables any more. they are slow and cumbersome.

if you're interested in "responsive" design, which is what it sounds like, you need to stay away from tables.

It depends on what you are doing.  Lots of people still use tables for many different reasons (including being out of date).  And the reasons are what should help you decide what to do.  The "tabular data" reason that many cite is like when you are displaying rows of database data or spreadsheet info.  The data is organized in tables in the source and that is the most direct and easiest way of displaying it.  The problem with 'divs' in that situation is that they don't 'stick together' like tables do so they can take a lot more code to do that function.

'div's are better at less grid-like layouts and I have found that is is easier to apply styles to them.  You find on some websites that they have over-indulged and make it into 'div' soup just like old sites used to have way too many layers of nested tables.  Some of that comes from automated code generators that can easily follow a set of rules whether they make a lot of sense or not.

In any case, you have to look at the goals and resources and make a decision on how to proceed.  There are a lot of examples of just about every kind of layout available on the web.  Try as many as you can so you can see how they work.

The person describing the limits of div is a moron.  The div can be styled to do everything a table element, row or cell can do and a lot more.  However the real stupidity of the argument is that not using a table means using divs.  The div is one of over a dozen structural tags that can be used to produce virtually any layout that can be imagined.  

Tables in a modern context are for display of tabular data. Using them for other things just makes the code more difficult to maintain.  The page loads slower, and the presentation is limited to the CSS property subset that can be applied.

The stupidest part of the argument is: " you are more free to design the site however you desire".  Modern web pages are about CONTENT not design.  Design supports content.  The old approach of making content fit into a fixed design is 20th century thinking.  I believe the discussion must have either been, as has been said, from the last century, or was from a satirical skit on the comedy channel.

Cd&

I have been working myself, with <table> CSS layouts for all my work, now going on 3 years.
I know that it is out-of-date design, however, it is how I self taught myself in designing my layouts.

I do want to move over to <div> layouts, and have looked in on it, however, I have not had the time to do so.

I am going to leave this thread open for a while, to see what people have to say.
Idea, sites, and otherwise, that show which is the better of the 2.

I remember the forum that I went onto, was indeed, from 2012.
And I also remember the person having a reputation level of, well, Very darn high.
Does not mean anything to most people, then again, everyone has their own thinking as to what is good and not good in this world.
What is old 20th century thinking in some aspects, to others, is a The perfect thing.
Does not mean that everyone believes, just as long as the person that makes it, feels as though it is the best they can do with the knowledge they have, and the ability they have obtained.

Keep it coming people.
Love reading your thoughts.

.. hmm, I just looked at your profile, you're an ASP guy. Sigh, you have a lot of unlearning to do. (No offense intended - Just that Microsoft doesn't follow the golden rule)

No kissing during business hours. Kissing is only allowed in the lounge. ;^)

Cd&

Microsoft doesn't follow the golden rule

The only rule that M$ follows is "get as much money for a given product as you can before everyone finds out it is just as bad; or worse, than the previous version.

Cd&

Cd& you crack me up you old dinosaur!

:-.)*

No offense taken.
As for ASP, I could care less who made it, I LOVE it.
I work well in it, and that is all that counts, on that aspect.

Most of the sites that I have liked, viewing the source is a complete JOKE
I mean, when you view it, it is a bunch of mess jumbled up, and I usually give up after a little while, and move on to something else.

Most site are designed using code generation programs, such as "FrontPage (or) Dreamweaver", and that makes it that much harder to attempt to learn something by.

Right now I am playing around with some <div> code, and trying to get it to do something.
So far, this is about as far as I have ever gotten in DIVs.

This is what I am playing around with right now.
http://ee.cffcs.com/Q_28003296/Q_28003296.html

However, trying to get the Content div to butt up, and having a padding of 5px between the 2 sidebars, is proving to not work out as I am used to.

Either way, I am learning, as I would like to make my sites more div structured than tabled.

If you want to use percentages that add up nicely to 100, you can't have any margins, padding or borders as they contribute to the overall width of the element, but don't get taken into account in the percentage value.

You can either apply percentage based margins/padding/borders and take them into account, or apply margins/padding/borders on inner containers.

Read up on the Box Model - understanding that will help you more than anything else.

Thanks Dino.

Koz, I am looking in on the Box Model right now.
Thanks.

By the way.
For using the %, I try to do it, for better page size with screen resolutions.

that's good, you just need to keep in mind how it affects the overall widths of the elements.

@Dave
When I first started "trying" to learn, which was about around the year 2000
I started tearing apart websites.
As a matter-of-fact
I had a KB (Knowledge Base) back in 2002, and I took the layout of Microsoft's KB.
As I really loved the way that it looked.
About 3 months after my site went live, I received an email from Microsoft
telling me to enjoy the layout, that they have changed their layout to something different.

I love that layout, and I loved the fact that Microsoft noticed that I loved it enough to use it as my own.

I am thinking about going back to that design for the KB that I have today.
And you are right, it is run, however, it is very time consuming at times as well.
Though, I do enjoy looking and dabbling in other peoples work.

I am designing the site that I am working on right now, as DIV and List.
there are still some Tables in it, that may stay, however, I am enjoying watching the
Div Elements come together with my site layout in mind.
So far, it looks just like the original.

Keep the thoughts and idea's coming.
This is becoming a right interesting thread.

Have a question.

In the div layout that I posted the link for.
The Lsidebar div, how would you make it grow to stay the same height with the
Content Div ?

that's the million dollar question :)

Heights cannot be given in percentages, so there is no simple or native way to do that. There are work arounds though ( which I don't particularly recommend ).


1. place both divs in a container and give both divs a very large amount of padding, and an equal amount of negative margin;

.div1, .div2{
   padding-bottom:9999px;
   margin-bottom:-9999px;
}

2. use pixel heights - kinda lame if the content is dynamic.

3. use the background image trick - apply a vertically repeating background image on the container of the two divs - it's not awesome, but it does the job - depends what you're going for.

4. use javascript to detect the higher div, and set both divs to that - not a bad solution if you're already using js on the page. Not a good solution where performance is of utmost importance and every bite and function call counts.

My recommendation is to leave the divs alone and not try to equalize heights. Design the page
to look good without equal heights.

Thanks Koz.
The design is coming along pretty good right now.
As the site gets more developed, and more data is entered
The side bars will grow in height along with its data.
So, I will keep your #1 in mind, if the data does not fill up enough.

Here is a demo page from another question here that will get you 100%.  Not a recommendation but an example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>100% Height</title>
<meta name="author" content="remorina" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
* {
	margin:0px;
	padding:0px;
	border:0px;
	}

html {height:100%;}
body {
        height:100% !important;
        background-color:#abcdef;
        font:11px Tahoma, "Lucida Grande", "Lucida Sans Unicode", Verdana;
        min-width:990px;
}

/****************** MAIN LAYOUT ****************************/
#header {
        background:#779977;
        height:141px;
        color:#FFF;
        width:100%;
}

#footer {
        clear:both;
        background:#000080;
        width:100%;
        height:44px;
        color:#FFFFFF;
}

#container{
   height:70%;
   border:5px solid green;
   overflow:hidden;
}

#sidebar {
        float:left;
        width:19%;
        height:100%;
        background-color:#f0f0f0;
        border-right:1px solid #cccccc;
}

#content {
        float:left;
        width:80%;      
}
.clear {
        clear:both;
}
</style>
</head>
<body>
    <div id="header">
        <div class="inner">
            THIS IS HEADER
        </div>
        <!--ends .inner -->
    </div>
    <!--ends #header -->
    <!-- CONTENT STARTS HERE -->
    <div id="container">
        <!--SIDEBAR STARTS HERE-->
        <div id="sidebar">
            <div class="inner">
                THIS IS SIDEBAR
            </div>
            <!--ends .inner -->
        </div>
        <!--ends #sidebar -->
        <!--CONTENT STARTS HERE-->
        <div id="content">
            <div class="inner">
                THIS IS CONTENT
                <br /><br /><br /><br /><br /><br />
                test
            </div>
            <!--ends .inner -->
        </div>
        <!--ends #content -->
        <div class="clear">
        </div>
    </div>
    <!--ends #container -->
    <div id="footer">
        <div class="inner">
            THIS IS FOOTER
        </div>
        <!--ends .inner -->
    </div>
    <!--ends #footer -->
</body>
</html>

Select allOpen in new window

^^ By using 100% height on the body, it almost works. Unfortunately if you put more content than will fit in the content div, it gets cut off because of the overflow:hidden. If you remove the overflow:hidden, the whole thing comes apart.

Right now I have both side parts with a
height:700px;
Which will run OK, until I get the side loaded down with Data.
Then I can look back at the Height of the sidebars, and see if they need to be changed
Or if removing the Height all together, and allowing it to grow on its own, is the better choice.

Yep.  There are limits to every method you can find.

What would be the best
body - Width ?

If I set it to high, then it will create scrollbars on the bottom.
To low, and the content gets squished.

I usually set everything at around 900px
As MOST computer now have wider screen resolutions.
However, there are still those that have the small resolutions,
So I have to watch out for those users as well.

@Koz
Doing some research, I found a great site, of which I am looking through their CSS right now.
And this is how they make their layout work across all platforms.
Pretty sweet.
http://themeid.com/demo/responsive/

@media screen and (max-width: 240px) {
}

Putting in everything that changes, within these elements, of which go all the way up to

@media screen and (max-width: 980px) {
}

I have played around with it, and had my text change when the browser window got smaller. That was pretty cool.

There is still a lot more to mess around with and to learn.
You think that you have it, then all of a sudden, you have something else that jumps into the mix, and you have to either start all over, or add into what you already have, and hope that it all works out the way you envision it to be.

For those interested.
I found this link, which comes with a downed code.
And walks you through how to do the "Responsive" Layout.
http://www.1stwebdesigner.com/css/responsive-website-tutorial/

Of which, I will be using to redesign my stayinshape.us site.

That is a page I would never recommend for any except Dave. ;^)

The initial load is way to slow, and it has over 200 errors in validation including such hacks as div inside span.  There are missing end tags; end tags for unopened elements, and attempts to use HTML5 on a page with an xhtml doctype.  

They manage to put a layout together with hacks, and very tolerant browsers; but I would not want to have to maintain junk like that.

Cd&

The main thing that I learned, which I cannot say was from that page actually, was the

@media screen and (max-width: 240px) {
}

Putting in everything that changes, within these elements, of which go all the way up to

@media screen and (max-width: 980px) {
}

And that is what I am concentrating on at the moment, and that was taken from another site.
However, I did pick up a few pointers from the last mentioned page.
Regardless of errors, as it seems that a LOT of sites have them, if I can pick up to smallest of detail that can help me improve my site design, then I am going to take it.
However, I never copy 100% of a site, or source code, I always start from the ground up, and work my way to where I need to be at, NOT where the so called instructions want me to be, which is in their shadows. So to speak.

Got something else here.
Lets say that you have an add, say one from Google Ads, that runs like so.

width=728;
height=90;

Is there a way to check this against a browse, and resize it?
Since it is nested within a JS Tag.

On my site, Google ads javascript generates an <iframe> of it's own size.  You can try scaling it to see if it works.

there are no guarantees with ads. even if that worked for one ad, it may not work for another. Ads are notoriously poorly written and unreliable. The last place I worked, we had different ads served for mobile and desktop - perhaps Google Ads has some documentation regarding that.

If you're interested in mobile, I just posted my mobile-menu code on github which I'm very keen to share.

My plan is write an article for EE, but since it's hot off my presses, here's a sneak preview:
https://github.com/kyleiwaniec/mobile-menu

There are two links to preview in the readme

cheers - always looking for feedback.

OK Guys.
This is my first time ever doing a site that is nearly all Div.
There are certain area's that are Tables, however, they will stay.

The site is created to run all the way down to:
240x320

I still have a lot of inner working to convert over, so the header still has old CSS code in that is not used in the main page, just in the inner pages.
I am hoping by tomorrow evening or Thursday, the site will be completely converted over to Div CSS (Except for the certain area's with Tables, some will not be changed)

http://www.stayinshape.us/Main2.asp?Type=Home

My son just went on the site with his new iPhone 4, and it just compresses the page, it does not move anything, as I thought that it would, of which is a good thing.

Let me know what you think.
CSS Validation shows 2 errors, of which will be dealt with most likely tomorrow.

thanks guys for all your input in this issue, that I never really understood.

Thanks everyone for your participation in this thread.
And to "kozaiwaniec"
I still have no idea as to why you would have made the Microsoft statement with ASP, and That I will have to do a lot of unlearning.... ASP Is server-side, not client-side, there for, it has nothing to do with HTML or CSS, there for, it is irrelevant in this thread.
With that stated.

All the advice given in this thread was very helpful.
I was able to make my main home page with a DIV layout, however, I hate the way it looks now, as I hated the way it looked before.
Instead of trying to mimic the old layout, I should have looked in on doing it a different way, of which is what I will be doing this weekend.
I will spend the time, and try to mimic another site's web layout I found, as it is more along the lines of an Exercise type of site layout.

As for converting all my sites over to div.
I will have to learn a lot about DIV layouts before I try to tackle that beast, as I have way to many sites to mess with right now, to do something like that.
Way to time-consuming, and the payoff is not great enough to do so.

Take care everyone, and once again, thanks for all the great advice, except the ASP comment, no offense taken, however, I love Microsoft products, it is how I make a living, so cannot bash something that I use every single day, and after being forced to use my son's Mac Book Pro laptop the last couple of days, MAC can kiss my A**.

Have a good one everyone
Carrzkiss

Hi Carrzkiss,

I'm not into OS wars - I'm really not. It's funny though, I bought my daughter a Windows 10 laptop for xmas, and I feel the same way about it as you feel about your son's Mac. LOL.

The ASP thing was kind of jaded I guess. I've just seen too many really awful stuff done by people who use it. But you are right, it is server side and shouldn't affect the front end.

There are lots of tools out there - a good artist makes good art no matter what tools they are given.

Cheers :)

Yes, ASP like all other server-side languages, are crap if the author does not know how to code them correctly. It is about like PHP, I have seen some wonderful work with it, and have seen a total mess mockup of a joke.
So, it all goes by who is coding the sites.
When I first started, my ASP work was for the dogs, now my codes are downloaded by the hundreds, and I have over 200+ users on my Coding Source site.
So, the work I do is good, and I make sure that everything that I put up, is the best, or I do not put it out, or a try to take it off before anyone sees it, which is what I am about to do to the new mock up of the Fitness site.

As for Windows, I love my NT4, 2000, XP, and now Win7.
Mac, I hate, will only use it when I have to.

Have a good one, have a lot of work to do, and a short time to get it down, before rushing to down, before Jack Frost ices or snows us in for the night.

Carrzkiss

meant to ask "kozaiwaniec"
What is: Windows 10

There is a Windows 8, never heard of Windows 10.

doh! yes. Windows 8. that is what I meant - I had IE 10 on the brain :)

Windows 10 is the version that will deliver everything promised and not delivered in Vista. Should be ready around 2018 and will work correct by 2021. ;^)

Cd&

My fav out of all the windows versions was "Windows 2000"
However, that was running "SP1", after SP2 came out, it screwed up the ability
To have open more than 20 windows at a time.

Windows XP - I enjoy it, as my favorite programs run on it.
Windows 7, I think that it is OK, however, they should NOT have released Windows 8
Until they fixed all the bugs in Win7.

I also run Windows 2003 Server.

Actually my favorite M$ opsys was ms-dos 1.25 to which I could link in custom libraries and extend the OS to support my apps on 128k pcs.  That was back before Bill became a billionaire and M$ became about the money.

Cd&