164

Previously my assumption about width: auto was that the width is set to that of the contents. Now I see that it takes the full width of the parent.

Can anyone please describe the differences between these?

Dan Dascalescu
  • 143,271
  • 52
  • 317
  • 404
Navin Rauniyar
  • 10,127
  • 14
  • 45
  • 68
  • 1
    In a nutshell: 1) auto, parent div width/height will be the sum of its children. 2) 100 percent, its width/height will be its parents'. See article [here](http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/) – Alan Dong Apr 27 '15 at 17:42

9 Answers9

194

Width auto

The initial width of a block level element like div or p is auto. This makes it expand to occupy all available horizontal space within its containing block. If it has any horizontal padding or border, the widths of those do not add to the total width of the element.

Width 100%

On the other hand, if you specify width:100%, the element’s total width will be 100% of its containing block plus any horizontal margin, padding and border (unless you’ve used box-sizing:border-box, in which case only margins are added to the 100% to change how its total width is calculated). This may be what you want, but most likely it isn’t.

To visualise the difference see this picture:

enter image description here

Source

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
  • 4
    For those who are curious about why `width: auto` behaves that way: http://stackoverflow.com/questions/28353625/why-does-percentage-width-work-even-if-no-explicit-width-value-given-for-contain/28354270#28354270 – Hashem Qolami Feb 07 '15 at 22:13
  • 1
    so `auto` does the same as `fill-available` – jiggunjer Aug 31 '17 at 08:17
  • 2
    So basically it has nothing to do with the size of the elements content, but totally refers to the parent width? – haemse May 23 '18 at 00:52
  • But we notice this behavior only when box-sizing is set to content-box. – Aditya Singh Feb 06 '23 at 08:22
151

  • width: auto; will try as hard as possible to keep an element the same width as its parent container when additional space is added from margins, padding, or borders.

  • width: 100%; will make the element as wide as the parent container. Extra spacing will be added to the element's size without regards to the parent. This typically causes problems.

enter image description here enter image description here

Ivan
  • 34,531
  • 8
  • 55
  • 100
Ian Jennings
  • 2,219
  • 1
  • 14
  • 10
24

Width 100% : It will make content width 100%. margin, border, padding will be added to this width and element will overflow if any of these added.

Width auto : It will fit the element in available space including margin, border and padding. space remaining after adjusting margin + padding + border will be available width/ height.

Width 100% + box-sizing: border box : It will also fits the element in available space including border, padding (margin will make it overflow the container).

Nishant Baranwal
  • 1,048
  • 1
  • 10
  • 18
13

It's about margins and border. If you use width: auto, then add border, your div won't become bigger than its container. On the other hand, if you use width: 100% and some border, the element's width will be 100% + border or margin. For more info see this.

Mateusz
  • 3,038
  • 4
  • 27
  • 41
7

As long as the value of width is auto, the element can have horizontal margin, padding and border without becoming wider than its container (unless of course the sum of margin-left + border-left-width + padding-left + padding-right + border-right-width + margin-right is larger than the container). The width of its content box will be whatever is left when the margin, padding and border have been subtracted from the container’s width.

On the other hand, if you specify width:100%, the element’s total width will be 100% of its containing block plus any horizontal margin, padding and border (unless you’ve used box-sizing:border-box, in which case only margins are added to the 100% to change how its total width is calculated). This may be what you want, but most likely it isn’t.

Source:

http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

Gokul Gopala Krishnan
  • 323
  • 3
  • 17
6

The initial width of a block level element like div or p is auto.

Use width:auto to undo explicitly specified widths.

if you specify width:100%, the element’s total width will be 100% of its containing block plus any horizontal margin, padding and border.

So, next time you find yourself setting the width of a block level element to 100% to make it occupy all available width, consider if what you really want is setting it to auto.

Michael Unterthurner
  • 921
  • 1
  • 10
  • 25
5

When we say 

width:auto;

width will never exceed the total width of parent element. Maximum width is it's parent width. Even if we add border, padding and margin, content of element itself will become smaller in order to give space for border, padding and margin. In case if space required for border + padding + margin is greater than total width of parent element then width of content will become zero.

When we say

width:100%;

width of content of element will become 100% of parent element and from now if we add border, padding or margin then it will cause child element to exceed parent element's width and it will starts overflowing out of parent element.

Santosh Kadam
  • 1,265
  • 14
  • 14
0

For positioning elements, width: 100%, not relative to the parent, but the nearest positioned element.

If they are all statically positioned, it is the nearest parent element.

weiya ou
  • 2,730
  • 1
  • 16
  • 24
-2

Using width:auto; + display:inline-block; in css giving awesome effect.

  • width : auto; makes element width auto for adjustment with another object using with display: inline-block; like if we have a div element and another one also div element and div elements are block level element so showing them together in one line use width: auto; and display:inline-block
Mohammed Javed
  • 866
  • 2
  • 9
  • 24