Converting tables to DIVs

[meinsla]

I figure this might not be an uncommon issue so if you've heard it all before, I apologize.

For the longest time I have been able to create attractive working site designs with tables. I know this is not the intended use for tables but it has always gotten the job done. I am now turning over a new leaf I guess and have started to convert my site into CSS but have run into some problems (see attached file)

What I am trying to do is SO painfully easy to do with tables but I cannot figure out for the life of me how to do it with DIV tags. I just wants some content to sit adjacent to some other content, presumably within another div. But everytime I try to do this, the second DIV holding the adjacent content wants to sit BELOW it instead of beside it.

Any help with this? Thanks in advance.

[Kravvitz]

Floats. (http://www.dynamicsitesolutions.com/css/layout-techniques/#floats_margins) Give the left column float:left. You may want to give the right column a left margin as well.

[meinsla]

Thanks for your help.

[felgall]

Are you sure that you should be using div tags. Are they actual page divisions or something else. If page divisions then the div tag is the right tag to use, if something else then you need to check if there is a tag for the type of content that you have and use the correct tag, if it is tabular data then the correct tag is <table>, for menus you probably want a <ul>, for headings <h1> or <h2> etc and for paragraphs <p>. Using divs where they don't belong is just as bad as using tables where they don't belong.

[meinsla]

Since when did <ul>, <h1>, <h2>, or <p> separate content as explained in my first post?

[Centauri]

Using css styling with semantic markup is all about styling the CONTENT. Forget about defining boxes and then stuffing the content into them, start by writing the content and then deciding how to logically group things and style them the way you want. Requires thinking exactly the opposite way you have been used to, but it is worth the effort to change.

Edit: Some good layout examples and tutorials can be seen here (http://www.pmob.co.uk/).

[felgall]

Since when did <ul>, <h1>, <h2>, or <p> separate content as explained in my first post?


Since people started coding their HTML properly to define what the content is.

Everything to do with how the content should appear goes in the stylesheet and styles the HTML tags that define what the content is. Only in rare cases should you need to add extra div tags to provide additional points in the HTML to be styled that are not provided by the tags that already define what the content is.