CSS Width/Height Pixel and Percentage Calculation Combintaion

CSS width/height pixel and percentage calculation combintaion?

After search though the net, I realized that it can't be done.
The only way to simulate is to adjust it with JavaScript and onresize event.

Setting width/height as percentage minus pixels

You can use calc:

height: calc(100% - 18px);

Note that some old browsers don't support the CSS3 calc() function, so implementing the vendor-specific versions of the function may be required:

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);

Setting element height/width to a combination of percent and pixel values

With CSS3, you can use calc():

$('div').css({
    height: 'calc(30%-5px)';
});

Note that this has limited browser support. Considering finding a value that can be used as a fallback (such as height: 29%).

CSS percentage and pixel layout combined

Why not try this approach: http://jsfiddle.net/Er8uX/2/

#wrapper {
    width: 1260px;
    border: 1px solid #ddd;
    overflow: hidden;
    position: relative;
}
#column-left {
    width: 245px;
    position: absolute;
    left: 0;
    border: 1px solid #f0f;
}

#column-mid {
    margin: 0 280px;
    border: 1px solid #00f;
}

#column-right {
    width: 245px;
    border: 1px solid #f0f;
    position: absolute;
    height: 100%;
    right: 0;
}

I think this is what you want, basically: fixed left and right column, main content according to wrapper width. I've used absolute positioning to keep them in place; on the right one I've used 100% height if you have a column with a background and want it to run all the way down, the left one has height according to content.

CSS Percentages And Pixels

% value in margin and padding is always % of the parent's width.

So say you have a <div> with margin-bottom: 25%;, inside another <div> which is 1000px wide, then the bottom margin of the <div> is 1000*25% = 250px.

.container {  width: 100px;  background: green;}
.child25,.child45,.child-none{  background: yellow;}
.child25 {  margin-bottom: 25%;}
.child45 {  margin-bottom: 45%;}

<div class="container">  <div class="child25">This one should have 25px margin bottom.</div>  <div class="child45">This one should have 45px margin bottom.</div>  <div class="child-none">This one has no margin</div></div>

How to set a max-width as percent AND pixels?

width:20%;
max-width:100px;

This sets the width to 20% but caps it at 100 px.

mixing percent and px in css without using calc()

Demo Fiddle

No calc needed!

Simply set the postion of the parent container to relative then the children to absolute, anchoring the content with a bottom of zero and top of 35 (the height of the header).

CSS

.resize_container {
    position: fixed !important;
    top: 65% !important;
    left: 0px !important;
}
.container_t {
    list-style: none;
    bottom: 0px;
    left: 0px;
    width: 350px;
    height: 150px;
    background-color: red;
    padding: 0;
    margin: 0;
    position:relative;
}
.header_t {
    width: 100%;
    height: 35px;
    background-color: blue;
    padding: 5px;
    box-sizing: border-box;
    position:absolute;
}
.content_container_t {
    width: 100%;
    background-color: green;
    padding: 5px;
    box-sizing: border-box;
    position:absolute;
    top:35px;
    bottom:0;
}
.ui-resizable-n {
    cursor: n-resize;
    border-top: 5px solid purple;
}
ui-resizable-e {
    cursor: e-resize;
    border-right: 5px solid purple;
}

Calculating width from percent to pixel then minus by pixel in LESS CSS

You can escape the calc arguments in order to prevent them from being evaluated on compilation.

Using your example, you would simply surround the arguments, like this:

calc(~'100% - 10px')

Demo : http://jsfiddle.net/c5aq20b6/

---

I find that I use this in one of the following three ways:

Basic Escaping

Everything inside the calc arguments is defined as a string, and is totally static until it's evaluated by the client:

LESS Input

div {
    > span {
        width: calc(~'100% - 10px');
    }
}

CSS Output

div > span {
  width: calc(100% - 10px);
}

Interpolation of Variables

You can insert a LESS variable into the string:

LESS Input

div {
    > span {
        @pad: 10px;
        width: calc(~'100% - @{pad}');
    }
}

CSS Output

div > span {
  width: calc(100% - 10px);
}

Mixing Escaped and Compiled Values

You may want to escape a percentage value, but go ahead and evaluate something on compilation:

LESS Input

@btnWidth: 40px;
div {
    > span {
        @pad: 10px;
        width: calc(~'(100% - @{pad})' - (@btnWidth * 2));
    }
}

CSS Output

div > span {
  width: calc((100% - 10px) - 80px);
}

Source: http://lesscss.org/functions/#string-functions-escape.

CSS combining % and px width

You shouldn't mix relative and absolute values, since it's hard or even impossible to calculate correct margins or position values with CSS only.

calc() hasn't been implemented in any browser and is "at-risk and may be dropped during the CR period".

If you still want to achieve something like this you should consider the following:

<div class="box">   
    <div class="left">left content</div>   
    <div class="right-wrapper">    
        <div class="right">right content</div>
    </div>      
</div>

.left{
    float:left;
    width: 100px;
}
.right-wrapper{
    margin-left:100px;
}
.right{
    margin-left: 5%;
}

JSFiddle Demo

---

Related Topics