Simulate <td> using <div> & <span>

How to display two "cells" on one line, one left, the other right aligned

[bbxl]

I'm trying to simulate the display of 2 and 3 "cells" in CSS, they way I used to use <td>.
For example, First line used to display a name in 1 cell, 450 px wide:
<div style="width:450px">
<span>Name goes here</span>

Second line to display street address in the first of 2 "cells", with the City, State and ZIP in the second, rightmost "cell":
<span style="text-align:left">left aligned first cell</span><span style="text-align:right">right aligned second cell</span>
</div>

If I do it "wrong" and specify span widths for each "cell" on the second line, IE 6 displays exactly what I want, but Moz 1.7 does not. I understand that spans are not to be assigned a width, explaining Moz behavior, but is there another, "correct" way to achieve my desired result?

Many thanks

[ronin]

This isn't going to be the answer that you want, but the data you've described sounds like it deserves to remain in a table. It's okay to use tables for tabular data.

Here we go...

Oh and Welcome to WebmasterWorld!

[jetboy_70]

Good advice.

Tables aren't evil for tabular data. Right now I'm using one for a 2x4 grid of data in an otherwise table free CSS floats layout, and it makes better sense to stick with a table in this instance too.

[mvisconte]

This might have been the post I've been looking for (as sad as it sounds...)

I have been wanting to update my requisite on-line resume to make it current and ... "prettier".

I figured it would also be a good idea to try to convert it to CSS as much as possible. The original is from years ago and is table-based (after having been excreted from MS Word). IS it worth trying to convert it from TABLE-based to CSS?

I didn't know how else to construct it in Word, so I used tables to give the content a structure. Now, years later, the structure provided by the Word-to-HTML conversion is pretty ugly to sort through when trying to update it.

I've already been playing w/ fonts that will render more correctly, but the hard part for me is, how to I logically/functionally break the components down to use CSS? I would think that I could do it at a higher level -- I just don't know how to approach it.

I started on a copy, and converted the top nested table (Name, address, contact info) into a div w/ nested, left-floated, width-specified divs - but I haven't been happy w/ the result. Is this just not the right kind of project to convert over to CSS positioning?

Internally there is a left column and a right column. The left column has a section heading (Objective, Summary of Qualifications, Experience, etc.). The right column has sections for descriptive text and bullet items, or has repeated individual employment details like:

Experience Date company location  
           Position (or job title) 
           Bullet items describing  
           + responsibilities or 
           + achievements.

(blank)      Date company location  
           Position (or job title) 
           Bullet items describing  
           + responsibilities or  
           + achievements. 

In my mind, I am figuring nested divs. Something like

Div (full container) 
   Div (personal info) 
     Name, address, contact info  
   /div 
   Div (resume info) 
    Div (section heading)  
      Section 
      Div (Job #1 info) 
        Dates, Company, location 
        Job title 
        Responsibilities (bullets) 
        Achievements (bullets) 
      /div 
      Div (Job #2 info) 
       (repeat) 
      /div 
    /div (section) 
etc. 

This is harder to describe than I thought it would be.

This isn't critical, just a learn-and-do exercise... something I thought might be of practical use to learn.

[ronin]

mvisconte> Consider using styled headings, paragraphs and <ul> lists. You shouldn't have to nest any <div>s.

[mvisconte]

Do you think I can get the "two-column" effect w/ the headings, paras, and ULs? I'll give it a try. What's the worst that can happen, eh?

[bbxl]

ronin & jetboy_70,

Thank you both so very much. It's refreshing to not hear the "ALL CSS, ALL THE TIME!" evangelism. It will certainly make my project easier. May I ask, once the major browsers all render CSS more or less consistently, should I consider this approach again? Or embrace the fact that tabular data belongs in a table and fret no more?

Again, many thanks,
bbxl

[ronin]

mvisconte> Two columns? No problem at all. You can do it with floats or margins or absolute positioning... however you want.

bbxl> It's using tables for layout purposes that's the outdated hack, not using tables per se. If you think of a basic html document comprising of headings, paragraphs, lists, images and tables - think of a physics paper, if you will - then you can see that to the put the whole lot *inside* a table is ridiculous... but to use a table for presenting data is perfectly sensible.

WYSIWYG editors and various design schools have completely obscured the fact that HTML is a description framework for academic documents. If more designers understood what they were putting together they would use <ul> for navigation lists, never have more than a single <h1> on a page and... they wouldn't use tables for screen layout.

[Robin_reala]

I use ul's for navigation lists - I was under the opinion that this was an accessibility win. I mean, that's all it is, an unordered list of links to other pages on my site...