SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    Toronto, ON, Canada
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Decimal Places in CSS

    > Ooops, meant to post in CSS - sorry.

    What are the rules for decimal places in CSS? I know I can use 1.2em to set a line-height, but what about percentages - can I have 10.5% for a width? Also, how many decimal places will CSS resolve? I am trying to have a variable number of SPANS fill 100% of a variable container. To do this, I am dividing 100% by the number of SPAN elements which, more often than not, results in a number like 2.9777777, and setting it as the width but it is not working out.

    Thanks,

    Rob.

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Although you can use decimal places in CSS like 100.0% in reality it best to keep to real numbers for percentages and only upto one decimal place with standard linear integer values. Your 2.9... probably would be read as 3.

    Furthermore you have to remember many elements use padding, margins and borders.
    Last edited by xhtmlcoder; Oct 7, 2003 at 08:13.

  3. #3
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Basically all your numbers will be rounded to the nearest pixel.

    You can't have a fraction of a pixel, but for all other measurements that are in the end converted to pixels, you can use decimal places.

    However rounding errors can occur where by rounding up, you use more pixels than 100% (like 33%, 34%, and 33% together, at certain screen sizes, may fill one pixel more than 100%). This can cause problems in floated layouts. The easiest way to fix this is to leave a bit of extra space between elements (like use 33%, 33%, and 33% together, and leave the last 1%).
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  4. #4
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ucahg
    (like 33%, 34%, and 33% together, at certain screen sizes, may fill one pixel more than 100%).
    In some cases, this works quite well:

    Code:
    div {
      width: 33.33%;
      mergin-right: -1px;
    }
    Not all the time though...

    Douglas
    Hello World

  5. #5
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    margin-right: might work better


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
  •