Heal Your Church WebSite


Teaching, rebuking, correcting & training in righteous web design.

How to use DIV tags for Layout instead of Tables

It’s not that I’m an anti-table zealot, rather I prefer to discourage the use of tables for simple issues of laying content side-by-side. For example, there are times you need to render stuff in parallel (that’s side-by-side for those of you in Rio Linda). In the past, you created a table then chalk-n-hug everything into place hoping that you never need to make the data accessible to text-only readers and that your fidgeting with column widths don’t cause some wackily inconsistent horizontal alignments … and/or had to add data on the fly.

Okay, enough theory – let’s demonstrate a common situation such as a page header or footer that needs to be centered to 99% of the page width and where you have a logo flushed left, some text flushed right and possibly some copyright stuff in the middle.

<div style=’text-align: center;’>
   <div style=’margin: 0 auto; width: 99%;’>
   <div style=’float: left;’>
         <img alt=’StrongMad Sermons’ src=’/archives/strongmad02.png’ />
      </div>
      <div style=’float: right; height:80px;’>
         <a href=’mailto:nospam@[127.0.0.1]‘ title=’bmail’>Email Pastor Bad</a>
      </div>
      <div style=’float: none;’>
         Strongmad’s Sermons © 2005<br />
         123 Fluffy Puff Street<br />
         Strongbadia, US of A<br />
         718-555-1212
         </div>
      <div style=’clear: both;’></div>
      </div>
</div>

StrongMad Sermons
Strongmad’s Sermons © 2005
123 Fluffy Puff Street
Strongbadia, US of A
718-555-1212

I know, some of you are saying ‘… but Dean, I can do the same with a table with less taggery than your divs.’ True enough, especially with regards to having to declare the height on the center text block to match or exceed the height of the graphic, but can you quickly and effectively change the position, skin, color or visibility of your table? I can with mine (once I move my inline markup to a stylesheet). Even better, my text blocks are read contiguously in order – giving search engines and text-based browsers a fighting chance.

Mark-up theology (snobbery) aside, how about a situation where you want to line up three different elements such as an unordered list next to an image next to a block of poetic text? Tables again could be used, but again, this precludes any work downline to position stuff as is aptly demonstrated time and time again at the CSS Zen Garden – and somewhat aptly demonstrated in the sample below:

<div id=’strongflot’>
   <div style=’float: left; padding: 2px 10px’>
         <ul>
            <li>Lorem</li>
            <li>impsum</li>
            <li>dolor</li>
            <li>sit</li>
            <li>amet</li>
         </ul>
   </div>
   <div style=’float: left; padding: 2px 10px’>
      <img alt=”lorem ipsum strongbad” src=”/archives/strongbad03.png” />
   </div>
   <div style=’float: left; padding: 2px 10px’>
      Lorem ipsum dolor sit amet,<br /> consectetuer adipiscing elit …
   </div>   
   <div style=’clear: both;’></div>
</div>
  • Lorem
  • impsum
  • dolor
  • sit
  • amet
lorem ipsum strongbad
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Integer viverra mi eu dui.
Suspendisse eu urna.
Suspendisse euismod mauris quis magna.

Sed accumsan,
magna sed vulputate bibendum …

Yes, I know some of you are cringing at the inline style encodings – which in real life should find their way into a style sheet. Using the last snippet as the basis for the following example, here’s all the code you need – with the addition of a spiffy dashed border:

<style type=”text/css” media=”screen”>
.strongfloat {
   border: 1px dashed #CCCCCC;
}
.strongfloat div {
   float: left;
   padding: 2px 10px
}
</style>

Not convinced as to why you want to do this? Then you need to read all the links enumerated in my post ‘The Mother of All Table Talks.’ There will be a test!

Evangelized and zealous for other CSS tricks you can play on your tables and columns? Then click, learn and apply ‘Making your DIVs behave like Tables.’

Got a nifty stuff of your own to strut? Leave a comment with a working hyperlink.

11 Comments

  1. I’ve read many a book on turning a table-built site into divs. It’s one of my apsirations for the church site I run (when I get the chance).

    Nice post!

  2. I think the coolest tableless design I’ve done was: http://elbourne.org/baptist/dodd/ IMHO it came out looking great, but the geeky thing I did with this site was that I did all the XHTML, divs and all, before I began thinking about how I would lay it out on the page, or style anything. After I had all the XHTML structure and content finished, I went to work on the external CSS. It made for a much cleaner design process and I do all my sites like that now.

  3. For those of us who are CSS-newbies, what is the purpose of the fourth DIV, with the clear property set?

  4. Nice explanation. Using tables for layout, while seemingly the ‘normal’ thing to do for many people and wysiwig editors, was originally a ‘hack’ that web designers figured out when Netscape introduced the border=”0″ attribute a bout 10 years ago. Now that CSS support in browsers has become more prevalent and the CSS spec has evolved, people should stop using the ‘hacked’ method of tables.

    The benefits of doing so are too numerous to ignore.

  5. dean, i’ve been trying to email you, but your email obfuscator doesn’t work for me. I have gmail as my default “client” and when I click it it does nothing.

  6. I’ve been doing tableless designs for a while now (www.lighthousecc.co.uk) and much prefer it to tables. I never designed much with tables before so I never had the learning curve to reteach myself. To me it makes much more sense to mark up a document using divs etc then it is for tables because I see my pages as made up of seperate sections rather than as one whole thing. Makes sense in my mind anyway!

    I think the fourth div is to do with a problem with Internet Explorer – sometimes the div’s bleed into each other and you have to put in an empty div. You learn this by trying it and getting frustrated!

  7. Colin: purpose of the 4th div is as it sounds, to clear the float. you are clearing the float to end it so to speak, otherwise, the text after it will show up next to the third div, and produce unwanted results, whether in IE, FF, etc.

    anyways, to my comment. one of the main points of using div’s rather than tables is semantics and standards. tables were created to display tabular data, thus the name tables. Some people get so zealous over using tables that they basically frame it as being bad no matter what. but that is not the point. adhering to the semantics of your code makes it that much better, and gives your code meaning, rather than hacking it. this all leads to standards, which seems to plague the CS world. any other industry, and you will see standards. look at civil engineering, they have standards on how things should be built. why not the same for CompSci and the Internet? I am very suprised that we have gone this far. If the world did this in other industries, one could only wonder where the world would be today. Half the planes would fall out of the sky because an American plane didn’t use the metric system, or whatever.

  8. Great article, and I strongly support it’s premise: my site is an all-CSS based production, and all hand-coded.

    Colin, the final clearing div keeps CSS-created columns from appearing behind a footer, or actually, it keeps the footer from rising to the level of the shortest column. On my site, without such a div, the footer would ocassionally appear just below the main content column, while the nav column extended below it.

    I learned HTML the “old way”, using massive quantities of table and font tags. CSS is far beyond those archaic ways of doing things! Also, make the move to XHTML, which is just a stricter version of HTML4.

  9. i want solution:

    i doing my whole site using div tags. when i restore down my window div is breaking (given in persentage). i want horizontal scrollbar when window restore, i don’t want breaking while restore.

    give me solution for this.

  10. Hi, i was wondering if u can use div tags inside tables??? if it’s not possible, is there another way to get the div tags to work just like tables, like adding colspand with div???

  11. Hello Sir!
    I am a bit new to programming, please excuse me for this silly question.
    But I am a bit confused on how to create multiple rows and colums through the latest tags
    Can you please write down the same code using tags

    Tushar Ranjan Mishra
    Sadyasanata Mishra

    Aditya Kumar Mishra

    Sarojini Mishra

    All I am trying to do is that I create a table layout in which the first Row has two columns while the second row has Only one column

    Kindly help me out, I know it’s avery silly question, But I do’t have the answer till now

    You can send the responce at tushar35314@gmail.com