Set Div Outerwidth Using CSS

Set div outerwidth using css

I'm wonder if there is way to set outerwidth of a div using css to ignore padding and borders.

You can use box-sizing: border-box to make padding and border be counted inside width:

div {
    box-sizing: border-box;
}

See: http://jsfiddle.net/thirtydot/6xx3h/

Browser support: http://caniuse.com/css3-boxsizing

The spec: http://www.w3.org/TR/css3-ui/#box-sizing

CSS - box model width

Please check width(); specifications. It returns the width without margin, padding and border.

If you want to include padding and border you have to use .outerWidth() and if you want to include margin too you have to use .outerWidth(true).

Hope this helps

Make the width of outer div to fit inner divs automatically

Your outer div is a block-level element. You need to make it an inline-level element. Inline elements automatically take the size of the content it contains. In terms of the question you've asked, just setting :

display: inline-block

on your outer div will do the trick. See the code snippet below for the demo :

  body {      font-size: 0;    }    #outer {      border: 1px solid black;        display: inline-block;    }    .inner {      font-size: 12px;      display: inline-block;      border: 1px solid red;    }

<div id='outer'>
  <div class='inner'>    text1  </div>  <div class='inner'>    text2  </div>
</div>

outerWidth() Returns a Different Value when Element is Hidden

You can't get the width of a display:none; element.

You need to hide it with Position:absolute; and left:-999999px;.

Here the css you need. Don't forget to put position:relative on the div wrapper.

JsFiddle : http://jsfiddle.net/7xqk01oa/3/

Using .outerWidth() & .outerHeight() with the 'resize' event to center a child element in parent

Although I completely disagree with this approach to horizontally centring an element, hopefully this will help you on your way.

Fiddle: https://jsfiddle.net/0uxx2ujg/

JavaScript:

var outer = $('.outer'), inner = $('.inner');
function centreThatDiv(){ 
    var requiredPadding = outer.outerWidth() / 2 - (inner.outerWidth() / 2);
    console.log(requiredPadding);
    outer.css('padding', '0 ' + requiredPadding + 'px').css('width','auto');
}

$(document).ready(function(){
    // fire on page load
    centreThatDiv();
});

$(window).resize(function(){
    // fire on window resize
    centreThatDiv();
});

HTML:

<div class="outer">
    <div class="inner">Centre me!</div>
</div>

CSS:

.outer{ width:80%; height:300px; margin:10%; background: tomato; }
.inner{ width:60px; height:60px; background:white; }

Furthered on from why I disagree with this approach - JavaScript shouldn't be used to lay things out. Sure - it can be, if it really needs to be used; but for something as simple as centring an element, it's not necessary at all. Browsers handle resizing CSS elements themselves, so by using JS you introduce more headaches for yourself further down the line.

Here's a couple of examples of how you can achieve this in CSS only:

text-align:center & display:inline-block https://jsfiddle.net/0uxx2ujg/1/

position:absolute & left:50% https://jsfiddle.net/0uxx2ujg/2/ (this can be used for vertically centring too which is trickier than horizontal)

Inner div not taking the whole scroll width of outer div

Yes, simply set the .innerDiv to display: inline-block;. This way, the .innerDiv behaves like an inline element, which is always as wide as its content, if you don't specify a width.

Here is the working example:

.outerDiv {   max-width:500px;   border:2px solid purple;   overflow:auto;   height: 100px;}.innerDiv {   display: inline-block; /* ← this does the trick */   border:1px dashed red;   background-color: lightgreen;   white-space:nowrap;   /* width: 100%; ← this has to be removed */}

<div class="outerDiv">    <div class="innerDiv">      This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div      </div></div>

better way to jQuery set outerWidth(true) - width

Is this what you're looking for?

var a = $('element');
    actualWidth = a.outerWidth(true),
    desiredWidth = 1000,
    difference = desiredWidth - actualWidth,

a.css('width',difference);

Centering elements with margin/padding using .outerWidth()/.outerHeight(). Function returns different values for margin and padding

This is happening because you are setting padding to the inner box instead of the outer one.

You can set it using an if condition.

Here's the working snippet. You can test it for both renderStyle("margin"); and renderStyle("padding");

var $outer = $(".outer");var $inner = $(".inner");
var getSpace = function(axis)  {  if (axis.toLowerCase() == "x") {    return ($outer.outerWidth() - $inner.outerWidth()) / 2;  }  else if (axis.toLowerCase() == "y") {    return ($outer.outerHeight() - $inner.outerHeight()) / 2;  }  }
var renderStyle = function(spacingType) {  var xi = getSpace("x");  var yi = getSpace("y");  if (spacingType == "padding") {      var $ei = $outer;  } else if (spacingType == "margin") {      var $ei = $inner;    }   $.each(["top", "right", "bottom", "left"], function(index, direction) {    if (direction == "top" || direction == "bottom") {      $ei.css(spacingType + "-" + direction, yi);    }    else if (direction == "right" || direction == "left") {      $ei.css(spacingType + "-" + direction, xi);    }                                       });                }; 
renderStyle("padding");

.outer {  width:400px;  height:200px;  border:1px solid black;  margin:20px;  box-sizing:border-box;}.inner {  width:100px;  height:100px;  background-color:grey;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="demo" class="outer">  <div class="inner">  </div></div>

---

Related Topics