how do 100% -100px with css and jquery

Question

I'm using the same code in css and jquery:

width: 100% -100px;

so, I use this code:

$(document).ready(function(){
    $('.left').css('width', '100%').css('width', '-=100px');
});

But it does not work properly when the browser is resized after loading the site will. I want working similar this code:

.left
{
    width: 80%; //100% -100px;
}
.right
{
    width: 20%; //100px;
}

If you need non-CSS (JQuery only) solution - run the same code on resize event (as you really setting width to fixed pixel size, not `calc` as shown in all answers). — Alexei Levenkov, Oct 07 '14 at 05:18

score 4 · Answer 1 · edited May 23 '17 at 11:49

UPDATE: Demo using jQuery

Option 1:

Using jQuery:

function resize_div(selector){
    var curr_width = selector.width(); // get the current width
    new_width = curr_width - 100;
    selector.css('width', new_width);
}

$(document).ready(function(){
    $('.left').css('width', '100%'); // set the width to 100% initially
    resize_div($('.left')); // then resize width on document ready
});
$(window).resize(function(){
    $('.left').css('width', '100%'); // set the width to 100% initially
    resize_div($('.left')); // resize width everytime the window is resized
});

HERE'S A DEMO

Option 2:

You can use css calc(), like:

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

Option 3:

using padding and box-sizing

.some-div
{
   padding-right: 50px;
   padding-left: 50px;
   width: 100%;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

I do not want use css3. please help me with css2. and this width size with jquery to be set. — kaka mishoo, Oct 07 '14 at 05:21

Mr_Green · Accepted Answer · 2014-10-07T05:28:54.450

Solution using CSS2:

HTML

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS

.left {
    position: absolute;
    left: 0px;
    right: 100px;
    background-color: green;
}
.right {
    width: 100px;
    background-color: red;
    float: right;
}
.left, .right {
    height: 50px;
}

.container{
    position: relative;
}

Working Fiddle

In the above fiddle, I applied position: absolute to the .left container. This makes that container not to stretch the parent element (hence, the layout will break). If you are sure that .left container's height will be less than the .right container, then go with the above solution. or else if you know that .left container's height will be more than the .right container's height then go with this solution. Fiddle.

If you are unsure of the heights of those containers and you don't want to break the layout, then I think it is better to go with javascript. (no need of javascript, if you know any of the container's height)

score 2 · Answer 3 · answered Oct 07 '14 at 05:16

2

In CSS3, you can use calc:

width: calc(100% - 100px);

Depending on browser support, your mileage may vary. The linked page contains a browser compatibility table.

answered Oct 07 '14 at 05:16

Robby Cornelissen

91,784
22
134
156

I do not want use css3. please help me with css2 – kaka mishoo Oct 07 '14 at 05:19

score 1 · Answer 4 · answered Oct 07 '14 at 05:17

1

You can use calc();

 width: calc(100% - 100px);

answered Oct 07 '14 at 05:17

Mukul Kant

7,074
5
38
53

I do not want use css3. please help me with css2 – kaka mishoo Oct 07 '14 at 05:22

score 1 · Answer 5 · answered Oct 07 '14 at 05:21

1

All other people has posted very good solution using CSS3 but if you want to make it using only jQuery then here is the workaround -

$(document).ready(function(){
    $('.left').css('width', $('.left').parent().width() - 100);
});

DEMO

answered Oct 07 '14 at 05:21

Bhushan Kawadkar

28,279
5
35
57

score 1 · Answer 6 · answered Oct 07 '14 at 05:32

Demo

box-sizing is CSS3 property. If you like it then you can use this code otherwise there is another calc property which I think isn't well supported.

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="m">
    <h1>100%-100px
  </div>
  <div id="s">
    100px for me
  </div>
</body>
</html>

CSS:

* {
  margin:0;
  padding:0;
}
html, body {
  height:100%;
}
#m {
  width:100%;
  background:red;
  height:100%;
  margin-left:-100px;
  padding-left:100px;
  vertical-align:top;

  box-sizing: border-box;
  float:left;
}
#s {
  float:left;
  vertical-align:top;
  height:100%;
  width:100px;

  background:green;
}

how do 100% -100px with css and jquery

6 Answers6