Clever Geek Handbook

How to do 100% -100px with css and jquery

I am using the same code in css and jquery:

width: 100% -100px;

therefore, I am using this code:

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

But it doesn't work as expected when the browser is resized after the site has loaded. I want to work with similar code:

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


source to share


6 answers


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 script

In the above script I applied position: absolute

to the container .left

. This causes the container to not stretch the parent (hence the layout will break). If you are confident that the height of the container .left

will be less than the container .right

, then skip to the solution above. or if you know the height of the container .left

will be greater than the height of the container .right

then skip to this solution. Fiddle .

If you're not sure about the height of these containers and you don't want to break the layout, I think it's better to go with javascript. (no javascript needed if you know any container height)

+3


source


UPDATE: Demo with 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 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 window size

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


source


In CSS3, you can use calc

:

width: calc(100% - 100px);

Your mileage may vary depending on browser support. The linked page contains the browser compatibility table .

+2


source


You can use calc ();

 width: calc(100% - 100px);
+1


source


All other people have posted a very good solution using CSS3, but if you want to do it using only jQuery then here is a workaround -

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

DEMO

+1


source


Demo

box-sizing

is a CSS3 property. If you like it, you can use this code, otherwise there is another property calc

that I think is not 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;
}
+1


source






More articles:


All Articles