www.webdeveloper.com
Results 1 to 4 of 4

Thread: Positioning without tables

  1. #1
    Join Date
    Jan 2013
    Posts
    5

    Positioning without tables

    I'm working on rewriting some CSS and I want to be sure I'm doing it properly.

    I need to position 2 images and 3 menus. There's a left menu, two top menus (a top nav and utility nav), and two images that are basically placed side by side. The way they are currently styled is through a table which we're trying to avoid.

    I was going to use position:relative; but I did some quick research to see if this could cause problems later and apparently it can. So I'm wondering what the best way to do this is. I'm trying to write this code in a way that will cause minimal problems later.

    If it matters any, we're using Joomla and since I don't fully understand how you theme in Joomla yet, I don't know if that changes anything or not.

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    The best way to do this is with floats, margins, and paddings. Here's a basic example:
    http://tinkerbin.com/P4F9g023

    I'm not sure if the link works in Internet Explorer.

  3. #3
    Join Date
    Jan 2013
    Posts
    5
    Thank you very much, I appreciate it!

  4. #4
    Join Date
    Aug 2012
    Location
    Tucson
    Posts
    45
    I use table-free layouts on all of my web sites and pages. If you visit the page listed in my signature block below you can see how it works by checking (right click) the source code. You can check the stylesheet by clicking on the CSS validator link toward the bottom of center section. Feel free to use any code snippets you find to your liking.

    Visit my page http://jp29.org/floatbox.htm to see how to array horizontal boxes using CSS.

    James
    Last edited by polyglot; 01-17-2013 at 01:05 PM. Reason: added missing word

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



Recent Articles