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:
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.
.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
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.
- Set display to
inline-block
to make the div width fit to its content. - Use
position: relative
andleft: 50%
to position its left edge to 50% of its containing element. - 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
Vertically Centering a Div in Body
Making a Custom Input Text Type
Codesandbox.Io <Img> Tag Not Loading Image
Getting Rid of Space with the Superscript in HTML Emails
Why Do Overflow Clear Margin of P-Tag
Z-Index Without Absolute Position
Css: Why Background-Color Breaks/Removes the Box-Shadow
Space Between Buttons with Bootstrap Class
Automatically Open <Details> Element on Id Call
Overflow-Y Scroll Not Working in Ie 11
How to Detect HTML 5 Compatibility in Browser