Hi everyone! I've coded an HTML email template consisting entirely of tables for work. My supervisor just told me that he needs it to consist all of divs instead of tables. T__T... but I have no idea how divs work or if I can even convert what I currently have. Basically he just wasted several hours of my life. :P I was wondering if anyone could help me out or just explain some stuff to me? Post or smail me if you can, I'd really appreciate it! I can repay you in a CW/item from my gallery if you'd like.

Tables are pretty outdated, no wonder your supervisor asked you to redo it! (most web designers/developers cringe at the thought of using tables for layouts lolz)

Divs are pretty easy, they're containers for your information, imagine them as boxes. You have to make a main box and inside put tiny boxes, or you can put boxes in them as well. The cool part is, if you want to apply a style to all the elements inside the box, you can apply it to the box and voila, all of them have it! So it's very easy and flexible! I'm sure you'll love them after getting used to them.

They can be position Static, Relative, Absolute and Fixed.

Static is the default, it means it's not positioned.

Relative positioning allows you to move the div anywhere without affecting the workflow, sorta like grabbing play-doh sticking it to a wall making it sorta long and moving the point somewhere different where it's stuck, but on the web, you won't see the part that's stuck to the wall, only the point, BUT the web knows that the element is occupying that space on the wall thus not ruining the workflow c:.

Absolute positioning lets you put the div anywhere you want since it takes the div out of the workflow, it's pretty cool and useful. Absolute positioning is used with relative positioning, Absolute is a rebellious kid while Relative is his strict parent. It allows you to move the absolute div inside the relative one. For example, if you where to position a div absolute and not inside a relative div, top: 0, it would go to straight to the top, but if it's inside a relative div, it'll go to the top of the relative div, establishing boundaries for our very rebellious div.

Fixed positioning allows you o put a div in a position and stay there even if you're scrolling the page.

Well that's pretty much the basics! Hopefully I managed to explain myself! If not please do tell me and ask me anything!

Here are some sites to get you started or to understand a little better what I'm trying to say:

http://www.barelyfitz.com/screencast/html-training/css/positioning/ http://www.tizag.com/htmlT/htmldiv.php http://www.w3schools.com/tags/tag_div.asp (this site is great for beginners) http://css-tricks.com/absolute-positioning-inside-relative-positioning/ (this site has awesome articles) http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/ (this one is a bit more advanced but it's a good read)

And as always, stackoverflow and google are your best friends :D

If you wish to know more about web design and web development I can recommend smashing magazine, line25, tutsplus, codrops and leveluptuts! They have nice tutorials, video series and articles as well. If you're wishing to adventure yourself a bit more in web design/developing you can always look up bootstrap,foundation,sass, compass, less, susy, javascript, jquery, ruby, python at least for reading since I'm sure all of it is a bit overwhelming and..... I'll stop because I think I'm getting excited here haha.