CSS horizontal alignment problems

sweavesweave boston
edited June 2007 in Internet & Media
Hi,
this is a preliminary of a website i am working on.
http://www.troymedical.com/testfolder/troymedical%202.html
the main problem i have run across is getting the 3 columns in the middle of the page to align horizontally.
i've tried a few things but it usually ends up messing with the pages footer.

anyone have any ideas or suggestions?

thanks.

Comments

  • nsanitynsanity New
    edited June 2007
    sweave wrote:
    Hi,
    the main problem i have run across is getting the 3 columns in the middle of the page to align horizontally.
    i've tried a few things but it usually ends up messing with the pages footer.

    Well, for one, make sure that you specify width for all of your columns. When I opened the page, #content had width:100% which isn't something you want it to have, considering it's probably only going to get 50-60% of the main area. (percentages are your friend, as well)

    Here is a great article at ALA, I have found it useful in the past:

    http://alistapart.com/articles/holygrail

    I can't post links apparently...so just remove change those ()'s to their chars...
  • jaredjared College Station, TX Icrontian
    edited June 2007
    nsanity wrote:
    Well, for one, make sure that you specify width for all of your columns. When I opened the page, #content had width:100% which isn't something you want it to have, considering it's probably only going to get 50-60% of the main area. (percentages are your friend, as well)

    Here is a great article at ALA, I have found it useful in the past:

    alistapart(dot)com(slash)articles(slash)holygrail

    I can't post links apparently...so just remove change those ()'s to their chars...

    woot woot!

    Listen to nsanity, he is a PHP and CSS guru. :cool:

    Good to see you around Nick :D
  • LincLinc Owner Detroit Icrontian
    edited June 2007
    Hey nsanity, good to see a veteran around. I fixed the link - we have an anti-spam measure that prevents posting links before 5 posts. I think I fixed it for you - let me know if it worked (trying something new).
  • sweavesweave boston
    edited June 2007
    uhoh
    that's the link i used to make the css ^___^;;;;
    i'll walk thru it again and see where i went wrong.
  • sweavesweave boston
    edited June 2007
    going thru it again now.
    i see one area where i was going wrong was the fact that i'm using ie7 and there is apparently a bug that causes the left column to vanish behind the central one and not pop out the side =(
    applying the fixes now and hope they work in ie6 and firefox.
  • jaredjared College Station, TX Icrontian
    edited June 2007
    Ok, well let us know if you need any more help or want us to give it a second look!

    cheers :jared:
  • sweavesweave boston
    edited June 2007
    k a quick update.
    after reading thru the linkthrus from alistapart i added the patches for ie7 and firefox that i found on the pages.

    got the main columns to line up as well as the left column to appear instead of hiding behind the content block.

    http://troymedical.com/testfolder/html3.html

    now the only problem i am having is getting the text to padd correctly.
    especially in the content box.
  • sweavesweave boston
    edited June 2007
    hehehe that was fast ^___^
    just had to stick in another div in the middle column and add padding to that :D
    now i just have to padd the other two columns.
    create the menu boxes and swap the left and right columns widths.

    any thoughts on the color scheme?

    ps. anyone know of any tutorials for getting "sexier" borders with css?
Sign In or Register to comment.