Setting Width:Auto Leads to Width:100%

difference between width auto and width 100 percent

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:

Sample Image

Source

Setting width:auto leads to width:100%

Because width:auto defaults to 100% (that is, minus borders and paddings, see here), if you are not in a floating / positioned environment. Actually, without

float:left

or

position: absolute

you're quite out of luck setting the width of an element to a minimum in CSS only. See, e.g., here for how you could achieve it in Firefox (only).

Edit: You could also use

display: table;
width: auto;

but, for one, this is also not supported in all browsers and then the table design may bring you in all kinds of other trouble.

Edit 2: You might, as suggested by DisgruntledGoat, also try display:inline-block. This page gives a cross-browser implementation targeting IE6+, FF2+, Safari 3+ and Opera.

Difference between width:auto and width:100% - what is it 100% of? (CSS)

The reason is because both fixed and absolute positioning take the element out of the flow of the document. The residual effect of this is that, unless explicitly told otherwise, the element will now grow/shrink according to the size of its content rather than the size of its parent.

As you've already discovered, a simple fix is to give it a width of 100 percent:

.fixed-element{

position:fixed;
width:100%

}

To address the issue of the quote on fixed positioning:

Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block. This is normally the viewport: the browser window or the paper’s page box.

I actually find it to be quite poorly worded. It's not meant to say that the dimensions will grow to the size of the viewport. Instead it's trying to distinguish the specific differences between absolute and fixed positioning. More thoroughly put: the dimensions/size of the fixed element will always be relative to the initial element. Whereas the dimensions/size of the absolute element will be relative to the containing element. That doesn't explicitly mean that it will actually take 100% of the viewport by default...

CSS: I can't set width to auto always appear 100%

use display: inline-block

and add a class

.clear { clear:both;}

place it in between the boxes

so

http://jsfiddle.net/HpMSU/1/

What does min-width: 100%; width: auto actually do?

I tested it in Chrome and it works fine with the width: auto; and height: auto; properties removed.

It's possible you're seeing an example of Cargo-Cult Programming (i.e. code that exists because the programmer thought it was necessary, but in reality it isn't necessary) - or it could be for a legacy browser bug (if this is the which is weird, as all browsers that support <video> all support CSS layout to a high degree of compliance.

How to use both width: 100% and height: auto on an image

Based on Haworth's method, another way would be to use a background image on an empty div and using the min-height property.

Image example

.container {
display: flex;
}
.text {
width: 50%;
}

.img-container {
width: 50%;
min-height: 100%;
background-image: url("https://images.unsplash.com/photo-1621166856483-1725976c4e21?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max");
background-size: cover;
background-position: center;
}
<div class="container">
<p class="text">Simultaneously we had a problem with prisoner drunkenness that we couldn’t figure out. I mean , the guards searched cells multiple times to no avail, that we couldn’t figure out.</p>
<div class="img-container"></div>
</div>

Make div 100% Width of Browser Window

There are new units that you can use:

vw - viewport width

vh - viewport height

#neo_main_container1
{
width: 100%; //fallback
width: 100vw;
}

Help / MDN

Opera Mini does not support this, but you can use it in all other modern browsers.

CanIUse

Sample Image

How can I let a div automatically set it own width?

Solution with inline-block

You could try display: inline-block and see if that works in your situation. However, you won't be able to center it using margin-left: auto & margin-right: auto because that technique requires a width value.

If possible, use display: inline-block and set text-align: center on it's container.

<div style="text-align: center">
<div style="display: inline-block;">
This will expand only as far as it needs to
</div>
</div>

Solution using Flexbox + container div

The original answer above was written in 2011, before flexbox was implemented. You can achieve a similar effect

<div style="display: flex; justify-content: center;">
<div>
This will expand only as far as it needs to
</div>
</div>

Solution without container div

There is another way to do this without a parent element.

  1. Set display to inline-block to make the div width fit to its content.
  2. Use position: relative and left: 50% to position its left edge to 50% of its containing element.
  3. Use transform: translateX(-50%) which will "shift" the element to the left by half its own width.
.center {
display: inline-block;
position: relative;
left: 50%;
transform: translateX(-50%);
}

How to make an element width: 100% minus padding?

box-sizing: border-box is a quick, easy way to fix it:

This will work in all modern browsers, and IE8+.

Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
width: 100%;
box-sizing: border-box;
}

The browser prefixed versions (-webkit-box-sizing, etc.) are not needed in modern browsers.



Related Topics



Leave a reply



Submit