SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Oct 2002
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I need help with a positioning problem...

    Hi all. I'm taking my first stab at a tableless design for a project I am working on, and I'm having some problems getting things laid out as they should be.

    Here's the page.
    Username: sitepoint
    Password: tester

    The main problem I am having is that I would like the table on the lower left to stay in the space to the left of the sidebar, yet also to fill that space. If I set the width of the table to 100%, it expands to fill the width of the canvas, instead of just expanding to fill the with of the div tag it's in.

    Click here to see what I am aiming for.

    Thanks a bunch.
    Last edited by UnnDunn; Jun 10, 2003 at 16:56. Reason: Added a bit more detail.

  2. #2
    SitePoint Member byss's Avatar
    Join Date
    Sep 2002
    Location
    Central Kentucky, USA
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Setting your mainleft div to relative, and then the top to 0 means it starts from the bottom of whatever element is directly above it. That's why the pictures don't start until after that right sidebar.

    Instead of relative, try absolute. You'll have to play around with the top's value to get it positioned right.

    The drawback to this will be that if your news and announcements section gets large, you'll eitehr overlap with the mainleft or you'll be forced to adjust the CSS file manually.

    I think there's a way you can use absolute and base your top off the bottom off another element's bottom, but I don't know that methodology.

    (ie, something along the lines of this--
    top = #content.bottom + 10px)
    Caution: Slow Children At Play -->

  3. #3
    SitePoint Zealot poLka's Avatar
    Join Date
    Apr 2003
    Location
    GF
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    any luck with knowing the exact syntax for this? (basing your absolute [top] off the [bottom] of another element?)

    top = #content.bottom + 10px

  4. #4
    SitePoint Member byss's Avatar
    Join Date
    Sep 2002
    Location
    Central Kentucky, USA
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I downloaded your pages and was playing with them.

    In your html, under your mainleft div block where you start the group of pictures, look for this.

    Code:
    <img alt="Newest Pictures" src="./templates/tableless/images/h_newestpictures.gif" width="170" height="23" />
    <table width='100%' align='center' cellpadding='3' cellspacing='0'>
    change the width of the table to no more than 65 percent, and it worked for even an 800x600 resolution on all my browsers as long as they were maximized. You can use

    Code:
    <img alt="Newest Pictures" src="./templates/tableless/images/h_newestpictures.gif" width="170" height="23" />
    <table width='75%' align='center' cellpadding='3' cellspacing='0'>

    I did some searching, but couldn't find anything such as I was talking about before. But I'm almost positive I remember reading about someone figuring out how to base positioning off of other elements like that. I'll keep checking.
    Caution: Slow Children At Play -->

  5. #5
    SitePoint Member
    Join Date
    Oct 2002
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help, guys!

    Quote Originally Posted by byss
    Setting your mainleft div to relative, and then the top to 0 means it starts from the bottom of whatever element is directly above it. That's why the pictures don't start until after that right sidebar.

    Instead of relative, try absolute. You'll have to play around with the top's value to get it positioned right.
    Even though the right sidebar is floated? It's only IE that places the table below the sidebar, and then only the table. Other elements of the same DIV (the 'newest pictures' and 'browse for more' images) are placed correctly.

    The drawback to this will be that if your news and announcements section gets large, you'll eitehr overlap with the mainleft or you'll be forced to adjust the CSS file manually.

    I think there's a way you can use absolute and base your top off the bottom off another element's bottom, but I don't know that methodology.

    (ie, something along the lines of this--
    top = #content.bottom + 10px)
    Hmm.. I'll investigate that. Sounds like exactly what I need. Thanks.


Bookmarks

Posting Permissions

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