Subtract pixles from a percent?

Posted on 2005-05-12
Last Modified: 2009-03-27
Call me crazy but i was looking for someing CSS related the other day and i stumbled across some more advanced things you could do..  now i can't find the page (i am sure i booked marked it but it must have been at work) any way this site said that it's possiable to define the width in somethign by a percent then subtract the amout of pixles from it example..

width: 100% - 10px;

can you really do this.. and if so how?
Question by:mightofnight
    LVL 30

    Assisted Solution

    That would be very nice...

    But unfortunately AFAIK, it does not work.
    It might be included in future CSS specs.

    However, IE supports the "expression" in css, that allows you to use the results of a javascript function.  Like this:
      width: expression(300 - 200);

    But I don't think you can use it to mix percentages with pixels.
    LVL 53

    Accepted Solution

    Well yu can't directly in CSS by a little bit of script will do it.  No matter how the the element is styled, it still has a width and dight in pixels for he rendering engine.

    so if you ahve something like:

    <div id="the div" style="90%" onclick="makeNarrow(this,100)">

    Then you just need to have this in  head o fthe page:

    <script type="text/javascript">
    function makeNarrow(el, factor)

    LVL 2

    Author Comment

    ya i found the site that i was looking back it was the expressions and as said i had mixed results.  

    Thanks forthe code Cd& i am not sure i only played around with it a little but it seams to work descent!

    thanks for the input guys...

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Javascript: Crash Course

    Javascript is not only emerging as the most important language to know, it's flexibility is unique. With Javascript being deployed on the web, mobile and even the desktop this is the one language that all technologists need to know.

    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    7 Experts available now in Live!

    Get 1:1 Help Now