Making 3 column for my site?

Discussion in 'CSS' started by VistaXP, Apr 24, 2006.

0
  1. #1
    Hi guys, I need help making a 120px (best in percentage) column on the right side of my main content area (round grey box), but not sure how. I will be adding 88x31 buttons in this column.

    Site: http://openlite.5gigs.com
    CSS: http://pastebin.ca/50967
     
    VistaXP, Apr 24, 2006 IP
  2. johneva

    johneva Well-Known Member

    Messages:
    1,480
    Likes Received:
    46
    Best Answers:
    1
    Trophy Points:
    170
    #2
    Not 100% sure what your asking but here is a 3 col layout knowen as the holy grail.

    Or here is one that is percentages for all three divs.

    Sorry I could not be more help.
     
    johneva, Apr 24, 2006 IP
  3. Blame Me

    Blame Me Guest

    Messages:
    162
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #3

    I've never done a fluid page design before (I have looked into it but I prefer to stick with 800x600 screen size for now), but from what I can see with your site you will need to make a few changes to the "Shout Box" table and "Link Exchange" table in-order to stop them spilling out of the div they are placed in.

    #Left Div - It is a fixed width because the "Shout Box" table will spill under the #content div (change the sizes of the "Shout Box" and Adsense images and you can change the fixed width to a %) Try this:

    #left {
    float: left;
    width: 300px;
    margin-top: 19px;
    }

    # Content Div - Make it 40% wide and remove the margin-left from 33% to 10px. While you are on with this change the "Link Exchange" table to 90% wide and it should remain in the #content div and resize without spilling over.

    #content {
    margin-left: 10px;
    margin-top: 15px;
    padding-right: 15px;
    padding-left: 15px;
    width: 40%;
    float: left;
    }

    #Right Div - Just use as is and play around with it.

    #right {
    float: left;
    width: 20%;
    height: 600px; <--- this is just for testing - use "auto" and the box will size to your requirements
    margin-top: 15px;
    margin-left: 5px;
    }

    I would define what browser size you are trying to target and then go from their. I would also (while trying/playing to fit this right div onto the page) place a border all around each div so when you come to test view it you can see how they line up together.


    Have fun and I hope this helps :)
     
    Blame Me, Apr 24, 2006 IP