Results 1 to 7 of 7

Thread: Converting tables to DIVs

  1. #1
    Join Date
    Aug 2006

    Converting tables to DIVs

    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.
    Last edited by meinsla; 11-17-2007 at 07:13 PM.
    "It'll could only cost you your life--and you got that for free."
    Forgotten Games

  2. #2
    Join Date
    Jul 2005
    Floats. Give the left column float:left. You may want to give the right column a left margin as well.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  3. #3
    Join Date
    Aug 2006
    Thanks for your help.
    "It'll could only cost you your life--and you got that for free."
    Forgotten Games

  4. #4
    Join Date
    Mar 2005
    Sydney, Australia
    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.

  5. #5
    Join Date
    Aug 2006
    Since when did <ul>, <h1>, <h2>, or <p> separate content as explained in my first post?
    "It'll could only cost you your life--and you got that for free."
    Forgotten Games

  6. #6
    Join Date
    Mar 2006
    Newcastle NSW Australia
    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.
    Last edited by Centauri; 11-18-2007 at 04:22 AM.

  7. #7
    Join Date
    Mar 2005
    Sydney, Australia
    Quote Originally Posted by meinsla
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.17688 seconds
  • Memory Usage 2,904KB
  • Queries Executed 13 (?)
More Information
Template Usage (33):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (7)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (7)postbit
  • (7)postbit_onlinestatus
  • (7)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • bbcode_parse_start
  • postbit_imicons
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates