SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: how to make the paragraph fixed?

  1. #1
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    428
    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?

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,670
    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
    SitePoint Award Recipient Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,101
    Mentioned
    66 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
    428
    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.

  5. #5
    Mouse catcher silver trophy
    SitePoint Award Recipient Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,101
    Mentioned
    66 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
  •