some positioning help please

Discussion in 'HTML' started by Steve Greenaway, Jan 22, 2005.

  1. http://www.engsoc.org/~macfisto/test/index2.html
    http://www.engsoc.org/~macfisto/test/position.css

    I'm trying to adapt a 3-column css layout to fit my own purposes. The
    original design came from:
    http://www.thenoodleincident.com/tutorials/box_lesson/basic4.html

    As you can see, my work seems to have gone horribly wrong. I can't
    figure out why my #main_content div doesn't fit in between the two side
    column divs the same way as the #middle div does in the example.

    Additionally, I'm trying to put a footer below the lowest of the 3
    columns. Can I position the footer relative to the container div that
    I wrapped around those 3 columns?

    --
    - Steve
    "I think a good friend would recommend CLR to all his friends."
     
    Steve Greenaway, Jan 22, 2005
    #1
    1. Advertising

  2. Steve Greenaway

    Richard Guest

    On 22 Jan 2005 20:44:12 GMT Steve Greenaway wrote:

    > http://www.engsoc.org/~macfisto/test/index2.html
    > http://www.engsoc.org/~macfisto/test/position.css


    > I'm trying to adapt a 3-column css layout to fit my own purposes. The
    > original design came from:
    > http://www.thenoodleincident.com/tutorials/box_lesson/basic4.html


    > As you can see, my work seems to have gone horribly wrong. I can't
    > figure out why my #main_content div doesn't fit in between the two side
    > column divs the same way as the #middle div does in the example.


    > Additionally, I'm trying to put a footer below the lowest of the 3
    > columns. Can I position the footer relative to the container div that
    > I wrapped around those 3 columns?


    To make divisions appear side by side, you must use "float". I don't see a
    one anywhere.
    You also use position:absolute twice with the same precise points.
    Use absolute only if ABSOLUTELY necessary.
    In your design, I don't see why you need it.
     
    Richard, Jan 22, 2005
    #2
    1. Advertising

  3. Steve Greenaway

    Toby Inkster Guest

    Toby Inkster, Jan 23, 2005
    #3
  4. Steve Greenaway

    Toby Inkster Guest

    Steve Greenaway wrote:

    > http://www.engsoc.org/~macfisto/test/index2.html
    >
    > As you can see, my work seems to have gone horribly wrong. I can't
    > figure out why my #main_content div doesn't fit in between the two side
    > column divs the same way as the #middle div does in the example.


    Your margin is set like so:

    margin: 205px 0px 205px 0px;

    That means 205px top and bottom, 0px left and right. You want it the other
    way around:

    margin: 0 205px;

    Although this seems to work even better:

    margin: 15px 205px;

    Your footer may never work as intended -- it's a weakness of layouts based
    on absolute positioning -- you never really know the heights of all the
    columns.

    Try putting the footer *inside* your #main_content.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Now Playing ~ ./matchbox_twenty/mad_season_by_matchbox_twenty/02_black_and_white_people.ogg
     
    Toby Inkster, Jan 23, 2005
    #4
  5. Kermit the Frog stuck a mic in Toby's face, who said:

    >Your margin is set like so:


    > margin: 205px 0px 205px 0px;


    >That means 205px top and bottom, 0px left and right. You want it the other
    >way around:


    > margin: 0 205px;


    Oops. Dunno how I messed that up.

    >Although this seems to work even better:


    > margin: 15px 205px;


    Does it make any real difference to the content if I use 0 margins and just
    use padding instead?

    >Your footer may never work as intended -- it's a weakness of layouts based
    >on absolute positioning -- you never really know the heights of all the
    >columns.


    >Try putting the footer *inside* your #main_content.


    This explains why I can never find an example 3-column layout with a
    header and a footer... One concern is that the #main_content won't
    necessarily be the longest column, it could change during updates. Also,
    if I put the footer in the #main_content, won't it only be the width of
    that particular column?

    I guess wrapping all 3 columns in an absolutely-positioned wrapper won't
    help either eh.

    I'll keep playing. Thanks.

    --
    - Steve
    "I think a good friend would recommend CLR to all his friends."
     
    Steve Greenaway, Jan 23, 2005
    #5
  6. Kermit the Frog stuck a mic in Steve's face, who said:

    >I'll keep playing. Thanks.


    Following up to myself. Tacky.
    I think another thing I did wrong was mix up the right/wrong numbers
    in the IE5 hack. It all looked so simple in the examples!
    The latest is at http://www.engsoc.org/~macfisto/test/test.html if
    anybody cares.

    --
    - Steve
    "I think a good friend would recommend CLR to all his friends."
     
    Steve Greenaway, Jan 23, 2005
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Amir
    Replies:
    2
    Views:
    442
    Andrew de la Harpe
    Jan 7, 2004
  2. Replies:
    4
    Views:
    521
    Chris Uppal
    May 5, 2005
  3. KK
    Replies:
    2
    Views:
    594
    Big Brian
    Oct 14, 2003
  4. MuZZy
    Replies:
    7
    Views:
    1,765
    Mike Hewson
    Jan 7, 2005
  5. Replies:
    4
    Views:
    338
    Puppet_Sock
    Oct 19, 2006
Loading...

Share This Page