# [web] Giving up on DIV layouts

This topic is 4238 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.

1. 1
Rutin
24
2. 2
3. 3
JoeJ
18
4. 4
5. 5

• 38
• 23
• 13
• 13
• 17
• ### Forum Statistics

• Total Topics
631708
• Total Posts
3001839
×