SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    how to make the paragraph fixed?

    this is the HTML structure.
    Code:
    <div id="nav">
    <table>...</table>
    <p>...</p>
    </div>
    the table's height is changed.how to make the paragraph's location fixed?
    Outdoor tools online store and wargame tools shop
    with best quality and service.
    comp molle tactical vest tactical clothing etc sell

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <div id="nav">
    <table>...</table>
    <p style="position:fixed;">...</p>
    </div>
    Hope that helps
    Last edited by donboe; Aug 15, 2010 at 18:45. Reason: Typo

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    How do you know how much space the table will need? If someone has set a larger default font size, the table will take up more space than you're expecting, and so may overlap the paragraph below

  4. #4
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    you're right. but the content of the table are input by the admin. the div's height is fixed.the table's height is dynamic.is there a way to make the paragraph show at the same location on all the pages.
    Outdoor tools online store and wargame tools shop
    with best quality and service.
    comp molle tactical vest tactical clothing etc sell

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    As donboe said, you can use position:fixed and set top/bottom and left/right.
    That still doesn't resolve your problem of having a dynamic height table above a fixed position element, unless the div is big enough to cater for the maximum text that will ever be entered in the table, in the maximum font size.

  6. #6
    SitePoint Member mpaulino's Avatar
    Join Date
    Nov 2007
    Location
    Philippines
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you know the height of the paragraph, you can specify a padding either on top or bottom of the browser window.

    HTML Code:
    <div id="nav" style="padding-bottom: 50px">
    <table>...</table>
    <p style="position:fixed; bottom: 0; height: 50px">...</p>
    </div>
    Position fixed is not like absolute, it will always follow the browser window regardless of its parent element's position value. If you don't want to specify a height, then you adjust the bottom padding until the paragraph doesn't overlap with anything anymore.


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
  •