difference between width auto and width 100 percent

Question

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

User · Answer

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

User · Answer

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     Source

User · Answer

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

User · Answer

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

User · Answer

Using width auto    display inline-block  in css giving awesome effect   width   auto  display  inline-block

User · Answer

Width 100    It will make content with 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

User · Answer

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

User · Answer

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

[html] difference between width auto and width 100 percent

Examples related to html

Examples related to css