# [web] Giving up on DIV layouts

This topic is 4028 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

I do all my page layouts with tables. So after reading a couple articles and being convinced that this is not the way to go anymore. I tried doing my pages with DIVs. I took me a 30 mins to figure out how to center an image within a div. OK, maybe it's me just not knowing how to do it properly so I go on. 1 Hour later I still can't get 3 divs next to each other aligned center on the page. My first problem is that CSS does not seem to be user friendly. You cannot guess from some of the attributes what they do and what combinations to use. Secondly is that some browsers support stuff in a certain way while others do it in another. It just feels hopeless. Now I will probably go back to tables as I am more productive and less-frustrated. And my layouts look the same 90% of the time, no matter what browser I am using. I don't know if I don't have the mindset to understand div layouts, but it just seem to me that some1 got it horribly wrong when they thought it will be better using divs for layouts (by better I mean easy and fast) Enough ranting and raving. If you feel I have it wrong or right, tell me about it.

##### Share on other sites
Just because you took longer to get used to DIVs than you did to get used to tables doesn't mean it's worse.

Making a badly formed table layout may seem like an easy way out to get a page ready in a few minutes, but when you realise the problems such as slower loading, more bandwidth usage and most importantly the perils in trying to edit the content, layout and appearance of the page, it will be too late.

Yes, using CSS is not child's play... it is fairly simple if you know what you want to do and if you know what does what in CSS, but if you don't... learn it.

Take a few minutes off and explore more with CSS... read articles/tutorials on some sites such as W3Schools and A List Apart, or if you like going into technical detail rather than practical examples... then just go over to w3.org.

These few minutes/hours spent in getting CSS right will help you save a lot more time that would have been wasted in trying to edit those nasty table layouts.

Quote:
 My first problem is that CSS does not seem to be user friendly. You cannot guess from some of the attributes what they do and what combinations to use.

CSS is user friendly alright... it's just that it does not come with any AI... you have to tell it what to do.

Quote:
 Secondly is that some browsers support stuff in a certain way while others do it in another. It just feels hopeless.

From my experience at least... different behaviours are rarely observed with CSS... and workarounds for these are easy... unlike the problems caused by using HTML attributes directly and complex table nesting.

##### Share on other sites
I'm not a web developer, merely someone that has dabbled with both implementations through the production of my own sites and I can see where you're coming from. My latest attempt at a web presence uses CSS for 2 simple reasons despite the fact that it currently causes me more headaches than simple tables.

1. Restyling through just the CSS.
If I wanted to restyle the site I could do so by changing merely the CSS. For an example of how far you can go by simply changing the CSS take a look at css zen garden

When it comes to the actual page content it contains only a few divs and other tags as opposed to a mass of table elements that start to push things around.

Like I say, I'm no pioneer of CSS based layout but I can see the point in sticking with it so I am doing.

##### Share on other sites
CSS is hard to get right from the start, but as soon as you have enough practice and plan forward a little, it pays back well.

##### Share on other sites
Quote:
 Original post by Verminox... the problems such as slower loading, more bandwidth usage and most importantly the perils in trying to edit the content, layout and appearance of the page, it will be too late.
This isn't always the case. The common example case is the columnar layout, where you want to break a page into equal height columns. It is far simpler (and less code) to just chuck a single row, three celled table onto the page.

People seem to assume that tables and CSS are mutually exclusive. They're not. You can quite happily theme a table using CSS as you would a div.

I do not advocate using tables for everything, far from it. There are just some cases where it's significantly easier (and cleaner) to use them for layout, though.

##### Share on other sites
Quote:
Original post by benryves
Quote:
 Original post by Verminox... the problems such as slower loading, more bandwidth usage and most importantly the perils in trying to edit the content, layout and appearance of the page, it will be too late.
This isn't always the case. The common example case is the columnar layout, where you want to break a page into equal height columns. It is far simpler (and less code) to just chuck a single row, three celled table onto the page.

People seem to assume that tables and CSS are mutually exclusive. They're not. You can quite happily theme a table using CSS as you would a div.

I do not advocate using tables for everything, far from it. There are just some cases where it's significantly easier (and cleaner) to use them for layout, though.

I don't disagree with you... there are some cases when tables may seem to provide the best solution... but that's only for very simply layouts and those aren't very extensible. It's the same as using OOP vs. Procedural. For a Hello World program... you won't use classes... but for building a 3D game... you would rather not use procedural C.

Consider a simple three column layout. Which would would you rather have on your page?

<table border="0" width="100%" cellspacing="1">  <tr>    <td width="30%">      <table border="0" width="100%">        <tr>          <th>Navigation</th>        </tr>        <tr>          <td>Item 1</td>        </tr>        <tr>          <td>Item 2</td>        </tr>        <tr>          <td>Item 3</td>        </tr>      </table>    </td>    <td width="50%">      <h1>My Web Page</h1>      <p>..........         ..........         ..........      </p>      <p>..........         ..........         ..........      </p>    </td>    <td>      <table border="0" width="100%">        <tr>          <th>Sponsors</th>        </tr>        <tr>          <td>Ad 1</td>        </tr>        <tr>          <td>Ad 2</td>        </tr>        <tr>          <td>Ad 3</td>        </tr>      </table>    </td>  </tr></table>

Or....

<style type="text/css">#nav {  float: left;  width: 30%;}#main {}#ads {  width: 20%;  float: right;}</style><div id="nav">  <h2>Navigation</h2>  <ul>    <li>Item 1</li>    <li>Item 2</li>    <li>Item 3</li>  </ul></div><div id="ads">  <h2>Sponsors</h2>  <ul>    <li>Ad 1</li>    <li>Ad 2</li>    <li>Ad 3</li>  </ul></div><div id="main">  <h1>My Web Page</h1>  <p>..........     ..........     ..........</p>  <p>..........     ..........     ..........</p></div>

Both serve the same purpose... look the same.... but just think how much easier it is to edit the second layout in case I needed to change something.... rather than try to find my way through all those nested tables/cells.

##### Share on other sites
Yeah, I guess giving up divs is not the smartest of things. I was just very frustrated when I wrote the post.

I just realised though, that if I gave up on c++ when first began, I wouldn't be happily doing game coding.

So I have decided to look for a CSS layout tutorial, can any1 recommend one. (PS I am looking at the one @ suicide.com, looks promising)

##### Share on other sites
Quote:
 Original post by VerminoxBoth serve the same purpose... look the same....
'Fraid not. First of all, in your float example, the text in the middle column will flow under the left and right floats if it gets too long. You need to add extra padding around the central column. Then IE 6 will add an extra 3 px margin around the floats, which can only be remedied by making the central column another float. Your next guess might be to float all three divs to the left and give them the appropriate width percentages, but then you'll have to reduce them by a few percent to stop them from being rearranged by rounding errors.

It gets even more fun when you want to make the left and right columns fixed widths (perhaps in ems, so they change with font size), and make the middle column take up the rest of the available space. Now you can't just use percentages: now you have to put in your left and right floats, then declare a non-semantic div with the necessary padding on its left and right, then add the actual content div inside it, floated to either side. Finally, if this is for a public Web site, you'll need to tweak it to make it work in all the modern browsers.

Definitely possible, but takes longer than doing a three-column layout with tables (especially when you don't overcomplicate the tables like in your example) and would be unlikely to be my first choice for some things, such as small private pages or prototypes. Until CSS provides something sensible for layout, tables are just plain easier in some cases.
/* Proposed syntax for CSS 3 layout */body {    display: "hhh" (50px)             "lcr" (*)             "fff" (intrinsic)         300px * 200px;}#header { position: h; }#left { position: l; }#content { position: c; } /* ... */

##### Share on other sites
If it's any consolation, it's driven me nuts multiple times. These sites helped though...

echo echo - A fairly straightforward progression through development

little boxes - some nicely laid out examples of common layouts.

tizag - Not very clear but a fair amount of the basics

##### Share on other sites
Quote:
 Original post by Beer HunterUntil CSS provides something sensible for layout, tables are just plain easier in some cases.

Wow, that's quite possibly the worst-explained W3 (draft) spec I've seen, and that's saying something. The use of arbitrary strings is a bit horrific. It's fixing the wrong problem, assuming that the reluctance to leave tables means that everybody wants grids, when in fact they almost always just want to be able to line up an arbitrary number of block elements horizontally without using numerous float or margin hacks. Surely that is fixable without something like this.

##### Share on other sites
I 100% agree. That's a horrible draft.

Back on topic, the CSS Discuss layouts page is great for getting working layouts.

##### Share on other sites
Everyone one of those can be broken by changing the font size :p.

##### Share on other sites
The biggest advantage to using CSS layouts is the flexibility. For instance, you could completely rearrange the layout by changing the external stylesheet and not the HTML itself. If you have hundreds of pages, or worse, dynamically generated pages, having CSS layouts comes in really handy.

Another example is when you need to serve the same content in different ways (visually impaired / high contrast version, print version, dark version, light version, etc...). At work, i'm currently working on a site that basically gets "resold". Resellers want lighweight theming. This can be done easily by keeping the HTML more or less the same but changing the linked stylesheet for the particular reseller. That way everyone can have their own "theme" but still use the same HTML. Yeah CSS!

Admittedly, it's more of a hassle up front. But i've had to deal with enough FrontPage table-based crappy crap crap to burn me on tables forever. Tables are still good for tabular data, and in very light layouts, but for major layouts, i'm starting to like CSS much more. A few years ago, i wouldn't say that, but now that browsers are starting to catch up i think CSS is the future.

##### Share on other sites
Quote:
Original post by Kylotan
Quote:
 Original post by Beer HunterUntil CSS provides something sensible for layout, tables are just plain easier in some cases.
Wow, that's quite possibly the worst-explained W3 (draft) spec I've seen, and that's saying something. The use of arbitrary strings is a bit horrific. It's fixing the wrong problem ...
Hehe, OK, granted. In spite of its flaws, though, I think it's a step up from floats if all I want is a three-column layout. Here's hoping that they can re-do it without the suck.

##### Share on other sites
Quote:
 Original post by leiavoiaThe biggest advantage to using CSS layouts is the flexibility. For instance, you could completely rearrange the layout by changing the external stylesheet and not the HTML itself. If you have hundreds of pages, or worse, dynamically generated pages, having CSS layouts comes in really handy.Another example is when you need to serve the same content in different ways (visually impaired / high contrast version, print version, dark version, light version, etc...). At work, i'm currently working on a site that basically gets "resold". Resellers want lighweight theming. This can be done easily by keeping the HTML more or less the same but changing the linked stylesheet for the particular reseller. That way everyone can have their own "theme" but still use the same HTML. Yeah CSS! Admittedly, it's more of a hassle up front. But i've had to deal with enough FrontPage table-based crappy crap crap to burn me on tables forever. Tables are still good for tabular data, and in very light layouts, but for major layouts, i'm starting to like CSS much more. A few years ago, i wouldn't say that, but now that browsers are starting to catch up i think CSS is the future.

Pretty much true, but the future isn't today imo, people still use browsers as old as IE4 and making sure your website looks ok is a royal pain in the ....

CSS is a powerful tool but without proper browser support im not really comfortable using it for the layout. (using it for fonts etc isn't as much of a problem since that does work properly with most browsers, and those that doesn't support it will still display the text), ofcourse for more complex layouts you really don't have much choice as tables quickly degenerate into a ugly unreadable mess of <tr .....><td .....>yucky-yucky</td><td>more yuck</td></tr>

##### Share on other sites
IE4 O_o

I don't even support that on the commercial sites I build. I haven't seen someone using IE4 in years. I support IE5 and 5.5 up to the point that the layout doesn't break in some horrible way (box model hacks) but I let everything else degrade gracefully. I don't even support IE6 fully (usually some visual but non-important gimicks that rely on arbitrary :hovers or complex selectors that are too hard to hack into IE6).

##### Share on other sites
Quote:
 Original post by SanderIE4 O_oI don't even support that on the commercial sites I build. I haven't seen someone using IE4 in years.
I have, but that was with a rather unusual target audience as the majority of the site's users all lived in the middle of nowhere and were using very old computers and software. I'd have to agree with Sander that unless you know you're targetting an unusual audience there's no real need for IE4 support these days.

##### Share on other sites
ok does anybody kno how to make a DIV layout cuz i dont get this thing at all man and i wanna make mi own so that its totally me

##### Share on other sites
What exactly don't you understand about the concept of using divs for your layouts? Do you not understand the idea at all, or is there a specific problem you're experiencing?

##### Share on other sites
Quote:
 Original post by MartinaJazmineDAok does anybody kno how to make a DIV layout cuz i dont get this thing at all man and i wanna make mi own so that its totally me

The concept is easy enough. You put <div></div> around each logical block on your page, then you use CSS style sheets layout the divs over the page. See the CSS discuss layouts page I posted above.

##### Share on other sites
Oh, btw for those that want to know, I haven't given up and finally got my website coded using divs. It is not very flexible when it comes to resizing, but resizing is not one of my specifications. Anyway this page helped a lot:

http://www.subcide.com/tutorials/csslayout/index.aspx

The only thing I wasn't able to implement was equal height columns and the hacks that are available don't seem good to me.

##### Share on other sites
Heh, I thought I recognized that domain... subcide.com -- he's a friend of mine from a designer community called theroot42.org

As a person who develops and oversees the development of websites, I can say unequivocally that CSS/XHTML layouts are phenomenal. Of course there's a frustrating learning curve, but once you "get it," you'll never go back. I hate tables, and avoid them at all costs simply because of the horrible code bloat.

One thing I'd like to note though, is that it's not a matter of "div layouts." That's frowned upon just like tables are. What you're trying to do is create
"[url=http://www.digital-web.com/articles/writing_semantic_markup/]semantic layouts[/url]," which means that the document's markup has meaning in and of itself.

Anyone who tells you that tables for layout are a good idea are people who don't have any serious experience in the field, or any deep knowledge of the internet in general. It's the same principle as "n-tiered" apps.

##### Share on other sites
naw what im not gettin is how to put all the codes in certain spots on my page

##### Share on other sites
You really can't get equal height columns in CSS (probably it's most obvious limitation). There are ways of producing the effect you are looking for though. It's generally referred to as the "Faux Columns" technique, which you can google.

##### Share on other sites
My advice to you is to find a site that offers CSS/Div templates, and looking at how these have been constructed.

Once you have seen it done, its a lot easier to figure out how to manage it yourself.

##### Share on other sites

This topic is 4028 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Create an account

Register a new account