CSS for a mail inbox

Question

I'm completely new to CSS. But I'm writing a mail inbox where it's just like your typical e-mail inbox which contains 3 columns for From, Subject, Received.

Can I get some basic CSS for formatting this data correctly (alignment, columning, etc.) from which I can build upon.

Any cool interesting designs are also welcome.

Answer 1

Here's are some three column layouts I would trust:

• http://www.alistapart.com/articles/holygrail
• http://designshack.co.uk/gallery/layout/3column/ (this one has some examples for inspiration)
• http://matthewjamestaylor.com/blog/perfect-3-column.htm

Honestly though, while these "could" work, you're probably looking to use a table. gasp Yes, a table, a table is the most semantically correct choice to put tabular data with repeating columns in. Naturally, there are lots of Javascript choices for doing tabular data as well. Flexigrid is a good one worth considering.

Answer 2

You can find almost all grid-based design at SmashingMagazine to get you started:

http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/

And here's a lot of CSS Layouts available for your choosing:

http://layouts.ironmyers.com/

Answer 3

I feel that this is one of the few scenarios where a <table> layout is actually the right layout. It's good of you to think of floating divs to perform this style layout, but the fact is you are displaying a table of data, which the only valid use of the <table> tag remaining. This also gives you the benefit of having evenly spaced columns.

Answer 4

You are trying to display tabular data, so should really use a table.

Although you could also achieve the the same thing using div's and floating them all in the same direction as shown below

<style>
.clear {clear:both}
#wrapper {width:500px; padding:2px; border:5px solid #000;}
#wrapper .row {border:1px solid #000;}
#wrapper .col {min-width:100px; border-right:1px solid #000; float:left;}
</style>

<div id="wrapper">
    <div class="row">
        <div class="col">From</div>
        <div class="col">Subject</div>
        <div class="col">Date</div>
        <div classs="clear"></div>
    </div>
</div>

Answer 5

I have pretty much have to agree with the <table> suggetions, since that's what it is. Or you could consider it to be an <ol>, maybe.

I'm not sure what kind of 'cool' design would be appropriate for an email inbox, since most of them would mess up user-expeectation, or I'm just not bright enough to rework a functional UI. Also I think that most reworks would changes in the control layer of the MVC, rather than the M or V.

Having said that...perhaps something akin to iTunes' newer presentation of Artists/Albums could work? But I'd have to suggest that it's a bad idea.