OK, in many cases you even don't need to do anything as by default div has height
and width
as auto, but if it's not your case, applying inline-block
display gonna work for you... look at the code I create for you and it's do what you looking for:
div {_x000D_
display: inline-block;_x000D_
}
_x000D_
<div>_x000D_
<table>_x000D_
<tr>_x000D_
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>_x000D_
<td>Nunc auctor aliquam est ac viverra. Sed enim nisi, feugiat sed accumsan eu, convallis eget felis. Pellentesque consequat eu leo nec pharetra. Aenean interdum enim dapibus diam.</td>_x000D_
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>_x000D_
</tr>_x000D_
</table>_x000D_
</div>
_x000D_
If you have containers breaking lines, after hours looking for a good CSS solution and finding none, I now use jQuery instead:
$('button').click(function(){_x000D_
_x000D_
$('nav ul').each(function(){_x000D_
_x000D_
$parent = $(this).parent();_x000D_
_x000D_
$parent.width( $(this).width() );_x000D_
_x000D_
});_x000D_
});
_x000D_
nav {_x000D_
display: inline-block;_x000D_
text-align: left; /* doesn't do anything, unlike some might guess */_x000D_
}_x000D_
ul {_x000D_
display: inline;_x000D_
}_x000D_
_x000D_
/* needed style */_x000D_
ul {_x000D_
padding: 0;_x000D_
}_x000D_
body {_x000D_
width: 420px;_x000D_
}_x000D_
_x000D_
/* just style */_x000D_
body {_x000D_
background: #ddd;_x000D_
margin: 1em auto;_x000D_
}_x000D_
button {_x000D_
display: block;_x000D_
}_x000D_
nav {_x000D_
background: #bbb;_x000D_
margin: 1rem auto;_x000D_
padding: 0.5rem;_x000D_
}_x000D_
li {_x000D_
display: inline-block;_x000D_
width: 40px;_x000D_
height: 20px;_x000D_
border: solid thin #777;_x000D_
margin: 4px;_x000D_
background: #999;_x000D_
text-align: center;_x000D_
}
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<button>fix</button>_x000D_
_x000D_
<nav>_x000D_
<ul>_x000D_
<li>3</li>_x000D_
<li>.</li>_x000D_
<li>1</li>_x000D_
<li>4</li>_x000D_
</ul>_x000D_
</nav>_x000D_
_x000D_
<nav>_x000D_
<ul>_x000D_
<li>3</li>_x000D_
<li>.</li>_x000D_
<li>1</li>_x000D_
<li>4</li>_x000D_
<li>1</li>_x000D_
<li>5</li>_x000D_
<li>9</li>_x000D_
<li>2</li>_x000D_
<li>6</li>_x000D_
<li>5</li>_x000D_
<li>3</li>_x000D_
<li>5</li>_x000D_
</ul>_x000D_
</nav>
_x000D_
You can try this code. Follow the code in the CSS section.
div {_x000D_
display: inline-block;_x000D_
padding: 2vw;_x000D_
background-color: green;_x000D_
}_x000D_
_x000D_
table {_x000D_
width: 70vw;_x000D_
background-color: white;_x000D_
}
_x000D_
<div>_x000D_
<table border="colapsed">_x000D_
<tr>_x000D_
<td>Apple</td>_x000D_
<td>Banana</td>_x000D_
<td>Strawberry</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Apple</td>_x000D_
<td>Banana</td>_x000D_
<td>Strawberry</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Apple</td>_x000D_
<td>Banana</td>_x000D_
<td>Strawberry</td>_x000D_
</tr>_x000D_
_x000D_
</table>_x000D_
</div>
_x000D_
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div id="content_lalala">
this content inside the div being inside a table, needs no inline properties and the table is the one expanding to the content of this div =)
</div>
</td>
</tr>
</table>
I know people don't like tables sometimes, but I gotta tell you, I tried the css inline hacks, and they kinda worked in some divs but in others didn't, so, it was really just easier to enclose the expanding div in a table...and...it can have or not the inline property and still the table is the one that's gonna hold the total width of the content. =)
Tampering around with Firebug I found the property value -moz-fit-content
which exactly does what the OP wanted and could be used as follow:
width: -moz-fit-content;
Although it only works on Firefox, I couldn't find any equivalent for other browsers such as Chrome.
What works for me is:
display: table;
in the div
. (Tested on Firefox and Google Chrome).
The solution is to set your div
to display: inline-block
.
display: inline-block
adds an extra margin to your element.
I would recommend this:
#element {
display: table; /* IE8+ and all other modern browsers */
}
Bonus: You can also now easily center that fancy new #element
just by adding margin: 0 auto
.
There are two better solutions
display: inline-block;
OR
display: table;
Out of these two display:table;
is better, because display: inline-block;
adds an extra margin.
For display:inline-block;
you can use the negative margin method to fix the extra space
You can use height: 100%
and width for your choice. This makes the div not larger than its content.
You could use display: flex
for parent element
#parentElement {
display: flex;
flex-direction: column;
align-items: flex-start;
}
Revised (works if you have multiple children): You can use jQuery (Look at the JSFiddle link)
var d= $('div');
var w;
d.children().each(function(){
w = w + $(this).outerWidth();
d.css('width', w + 'px')
});
Do not forget to include the jQuery...
I would just set padding: -whateverYouWantpx;
You can use inline-block
as @user473598, but beware of older browsers..
/* Your're working with */
display: inline-block;
/* For IE 7 */
zoom: 1;
*display: inline;
/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;
Mozilla doesn’t support inline-block at all, but they have -moz-inline-stack
which is about the same
Some cross-browser around inline-block
display attribute:
https://css-tricks.com/snippets/css/cross-browser-inline-block/
You can see some tests with this attribute in: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
Foo Hack – Cross Browser Support for inline-block Styling (2007-11-19).
My CSS3 flexbox solution in two flavors: The one on top behaves like a span and the one at the bottom behaves like a div, taking all the width with the help of a wrapper. Their classes are "top", "bottom" and "bottomwrapper" respectively.
body {_x000D_
font-family: sans-serif;_x000D_
}_x000D_
.top {_x000D_
display: -webkit-inline-flex;_x000D_
display: inline-flex;_x000D_
}_x000D_
.top, .bottom {_x000D_
background-color: #3F3;_x000D_
border: 2px solid #FA6;_x000D_
}_x000D_
/* bottomwrapper will take the rest of the width */_x000D_
.bottomwrapper {_x000D_
display: -webkit-flex;_x000D_
display: flex;_x000D_
}_x000D_
table {_x000D_
border-collapse: collapse;_x000D_
}_x000D_
table, th, td {_x000D_
width: 280px;_x000D_
border: 1px solid #666;_x000D_
}_x000D_
th {_x000D_
background-color: #282;_x000D_
color: #FFF;_x000D_
}_x000D_
td {_x000D_
color: #444;_x000D_
}_x000D_
th, td {_x000D_
padding: 0 4px 0 4px;_x000D_
}
_x000D_
Is this_x000D_
<div class="top">_x000D_
<table>_x000D_
<tr>_x000D_
<th>OS</th>_x000D_
<th>Version</th> _x000D_
</tr>_x000D_
<tr>_x000D_
<td>OpenBSD</td>_x000D_
<td>5.7</td> _x000D_
</tr>_x000D_
<tr>_x000D_
<td>Windows</td>_x000D_
<td>Please upgrade to 10!</td> _x000D_
</tr>_x000D_
</table>_x000D_
</div>_x000D_
what you are looking for?_x000D_
<br>_x000D_
Or may be..._x000D_
<div class="bottomwrapper">_x000D_
<div class="bottom">_x000D_
<table>_x000D_
<tr>_x000D_
<th>OS</th>_x000D_
<th>Version</th> _x000D_
</tr>_x000D_
<tr>_x000D_
<td>OpenBSD</td>_x000D_
<td>5.7</td> _x000D_
</tr>_x000D_
<tr>_x000D_
<td>Windows</td>_x000D_
<td>Please upgrade to 10!</td> _x000D_
</tr>_x000D_
</table>_x000D_
</div>_x000D_
</div>_x000D_
this is what you are looking for.
_x000D_
I've a span
inside a div
and just setting margin: auto
to the container div
worked for me.
div{
width:fit-content;
}
_x000D_
<div>
<table>
</table>
</div>
_x000D_
Tampering around with Firebug I found the property value -moz-fit-content
which exactly does what the OP wanted and could be used as follow:
width: -moz-fit-content;
Although it only works on Firefox, I couldn't find any equivalent for other browsers such as Chrome.
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
Foo Hack – Cross Browser Support for inline-block Styling (2007-11-19).
I think using
display: inline-block;
would work, however I'm not sure about the browser compatibility.
Another solution would be to wrap your div
in another div
(if you want to maintain the block behavior):
HTML:
<div>
<div class="yourdiv">
content
</div>
</div>
CSS:
.yourdiv
{
display: inline;
}
Not knowing in what context this will appear, but I believe the CSS-style property float
either left
or right
will have this effect. On the other hand, it'll have other side effects as well, such as allowing text to float around it.
Please correct me if I'm wrong though, I'm not 100% sure, and currently can't test it myself.
I have solved a similar problem (where I didn't want to use display: inline-block
because the item was centered) by adding a span
tag inside the div
tag, and moving the CSS formatting from the outer div
tag to the new inner span
tag. Just throwing this out there as another alternative idea if display: inline block
isn't a suitable answer for you.
The answer for your question lays in the future my friend ...
namely "intrinsic" is coming with the latest CSS3 update
width: intrinsic;
unfortunately IE is behind with it so it doesn't support it yet
More about it: CSS Intrinsic & Extrinsic Sizing Module Level 3 and Can I Use?: Intrinsic & Extrinsic Sizing.
For now you have to be satisfied with <span>
or <div>
set to
display: inline-block;
Try to use width: max-content
property to adjust the width of the div by it's content size.
Try this example,
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width:500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
width: max-content;
margin: auto;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class="ex1">This div element has width 500px;</div>
<br>
<div class="ex2">Width by content size</div>
</body>
</html>
Try display: inline-block;
. For it to be cross browser compatible please use the below css code.
div {_x000D_
display: inline-block;_x000D_
display:-moz-inline-stack;_x000D_
zoom:1;_x000D_
*display:inline;_x000D_
border-style: solid;_x000D_
border-color: #0000ff;_x000D_
}
_x000D_
<div>_x000D_
<table>_x000D_
<tr>_x000D_
<td>Column1</td>_x000D_
<td>Column2</td>_x000D_
<td>Column3</td>_x000D_
</tr>_x000D_
</table>_x000D_
</div>
_x000D_
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div id="content_lalala">
this content inside the div being inside a table, needs no inline properties and the table is the one expanding to the content of this div =)
</div>
</td>
</tr>
</table>
I know people don't like tables sometimes, but I gotta tell you, I tried the css inline hacks, and they kinda worked in some divs but in others didn't, so, it was really just easier to enclose the expanding div in a table...and...it can have or not the inline property and still the table is the one that's gonna hold the total width of the content. =)
div{
width:auto;
height:auto;
}
You can do it simply by using display: inline;
(or white-space: nowrap;
).
I hope you find this useful.
A CSS2 compatible solution is to use:
.my-div
{
min-width: 100px;
}
You can also float your div which will force it as small as possible, but you'll need to use a clearfix if anything inside your div is floating:
.my-div
{
float: left;
}
What if we define a global variable and use that for both.
:root {_x000D_
--table-width: 400px;_x000D_
}_x000D_
_x000D_
.container{_x000D_
width:var(--table-width);_x000D_
border: 1px solid black; // easy visualization_x000D_
}_x000D_
.inner-table {_x000D_
width:var(--table-width);_x000D_
border: 1px solid red; // easy visualization_x000D_
}
_x000D_
<div class="container">_x000D_
<table class="inner-table">_x000D_
<tr>_x000D_
<td>abc</td>_x000D_
</tr>_x000D_
</table>_x000D_
</div>
_x000D_
Simply
<div style="display: inline;">
<table>
</table>
</div>
Not knowing in what context this will appear, but I believe the CSS-style property float
either left
or right
will have this effect. On the other hand, it'll have other side effects as well, such as allowing text to float around it.
Please correct me if I'm wrong though, I'm not 100% sure, and currently can't test it myself.
Just put a style into your CSS file
div {
width: fit-content;
}
I would just set padding: -whateverYouWantpx;
What if we define a global variable and use that for both.
:root {_x000D_
--table-width: 400px;_x000D_
}_x000D_
_x000D_
.container{_x000D_
width:var(--table-width);_x000D_
border: 1px solid black; // easy visualization_x000D_
}_x000D_
.inner-table {_x000D_
width:var(--table-width);_x000D_
border: 1px solid red; // easy visualization_x000D_
}
_x000D_
<div class="container">_x000D_
<table class="inner-table">_x000D_
<tr>_x000D_
<td>abc</td>_x000D_
</tr>_x000D_
</table>_x000D_
</div>
_x000D_
You can try fit-content
(CSS3):
div {
width: fit-content;
/* To adjust the height as well */
height: fit-content;
}
I think using
display: inline-block;
would work, however I'm not sure about the browser compatibility.
Another solution would be to wrap your div
in another div
(if you want to maintain the block behavior):
HTML:
<div>
<div class="yourdiv">
content
</div>
</div>
CSS:
.yourdiv
{
display: inline;
}
div{
width:fit-content;
}
_x000D_
<div>
<table>
</table>
</div>
_x000D_
The answer for your question lays in the future my friend ...
namely "intrinsic" is coming with the latest CSS3 update
width: intrinsic;
unfortunately IE is behind with it so it doesn't support it yet
More about it: CSS Intrinsic & Extrinsic Sizing Module Level 3 and Can I Use?: Intrinsic & Extrinsic Sizing.
For now you have to be satisfied with <span>
or <div>
set to
display: inline-block;
div{
width:auto;
height:auto;
}
<div class="parentDiv" style="display:inline-block">
// HTML elements
</div>
This will make parent div width same as the largest element width.
We can use any of the two ways on the div
element:
display: table;
or,
display: inline-block;
I prefer to use display: table;
, because it handles, all extra spaces on its own. While display: inline-block
needs some extra space fixing.
This seems to work fine for me on all browsers. Example is an actual ad i use online and in newsletter. Just change the content of the div. It will adjust and shrinkwrap with the amount of padding you specify.
<div style="float:left; border: 3px ridge red; background: aqua; padding:12px">
<font color=red size=4>Need to fix a birth certificate? Learn <a href="http://www.example.com">Photoshop in a Day</a>!
</font>
</div>
width:1px;
white-space: nowrap;
works fine for me :)
I think using
display: inline-block;
would work, however I'm not sure about the browser compatibility.
Another solution would be to wrap your div
in another div
(if you want to maintain the block behavior):
HTML:
<div>
<div class="yourdiv">
content
</div>
</div>
CSS:
.yourdiv
{
display: inline;
}
You want a block element that has what CSS calls shrink-to-fit width and the spec does not provide a blessed way to get such a thing. In CSS2, shrink-to-fit is not a goal, but means to deal with a situation where browser "has to" get a width out of thin air. Those situations are:
when there are no width specified. I heard they think of adding what you want in CSS3. For now, make do with one of the above.
The decision not to expose the feature directly may seem strange, but there is a good reason. It is expensive. Shrink-to-fit means formatting at least twice: you cannot start formatting an element until you know its width, and you cannot calculate the width w/o going through entire content. Plus, one does not need shrink-to-fit element as often as one may think. Why do you need extra div around your table? Maybe table caption is all you need.
OK, in many cases you even don't need to do anything as by default div has height
and width
as auto, but if it's not your case, applying inline-block
display gonna work for you... look at the code I create for you and it's do what you looking for:
div {_x000D_
display: inline-block;_x000D_
}
_x000D_
<div>_x000D_
<table>_x000D_
<tr>_x000D_
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>_x000D_
<td>Nunc auctor aliquam est ac viverra. Sed enim nisi, feugiat sed accumsan eu, convallis eget felis. Pellentesque consequat eu leo nec pharetra. Aenean interdum enim dapibus diam.</td>_x000D_
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>_x000D_
</tr>_x000D_
</table>_x000D_
</div>
_x000D_
Try display: inline-block;
. For it to be cross browser compatible please use the below css code.
div {_x000D_
display: inline-block;_x000D_
display:-moz-inline-stack;_x000D_
zoom:1;_x000D_
*display:inline;_x000D_
border-style: solid;_x000D_
border-color: #0000ff;_x000D_
}
_x000D_
<div>_x000D_
<table>_x000D_
<tr>_x000D_
<td>Column1</td>_x000D_
<td>Column2</td>_x000D_
<td>Column3</td>_x000D_
</tr>_x000D_
</table>_x000D_
</div>
_x000D_
Not knowing in what context this will appear, but I believe the CSS-style property float
either left
or right
will have this effect. On the other hand, it'll have other side effects as well, such as allowing text to float around it.
Please correct me if I'm wrong though, I'm not 100% sure, and currently can't test it myself.
There are two better solutions
display: inline-block;
OR
display: table;
Out of these two display:table;
is better, because display: inline-block;
adds an extra margin.
For display:inline-block;
you can use the negative margin method to fix the extra space
Simply
<div style="display: inline;">
<table>
</table>
</div>
You want a block element that has what CSS calls shrink-to-fit width and the spec does not provide a blessed way to get such a thing. In CSS2, shrink-to-fit is not a goal, but means to deal with a situation where browser "has to" get a width out of thin air. Those situations are:
when there are no width specified. I heard they think of adding what you want in CSS3. For now, make do with one of the above.
The decision not to expose the feature directly may seem strange, but there is a good reason. It is expensive. Shrink-to-fit means formatting at least twice: you cannot start formatting an element until you know its width, and you cannot calculate the width w/o going through entire content. Plus, one does not need shrink-to-fit element as often as one may think. Why do you need extra div around your table? Maybe table caption is all you need.
A CSS2 compatible solution is to use:
.my-div
{
min-width: 100px;
}
You can also float your div which will force it as small as possible, but you'll need to use a clearfix if anything inside your div is floating:
.my-div
{
float: left;
}
Try to use width: max-content
property to adjust the width of the div by it's content size.
Try this example,
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width:500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
width: max-content;
margin: auto;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class="ex1">This div element has width 500px;</div>
<br>
<div class="ex2">Width by content size</div>
</body>
</html>
We can use any of the two ways on the div
element:
display: table;
or,
display: inline-block;
I prefer to use display: table;
, because it handles, all extra spaces on its own. While display: inline-block
needs some extra space fixing.
A CSS2 compatible solution is to use:
.my-div
{
min-width: 100px;
}
You can also float your div which will force it as small as possible, but you'll need to use a clearfix if anything inside your div is floating:
.my-div
{
float: left;
}
If you have containers breaking lines, after hours looking for a good CSS solution and finding none, I now use jQuery instead:
$('button').click(function(){_x000D_
_x000D_
$('nav ul').each(function(){_x000D_
_x000D_
$parent = $(this).parent();_x000D_
_x000D_
$parent.width( $(this).width() );_x000D_
_x000D_
});_x000D_
});
_x000D_
nav {_x000D_
display: inline-block;_x000D_
text-align: left; /* doesn't do anything, unlike some might guess */_x000D_
}_x000D_
ul {_x000D_
display: inline;_x000D_
}_x000D_
_x000D_
/* needed style */_x000D_
ul {_x000D_
padding: 0;_x000D_
}_x000D_
body {_x000D_
width: 420px;_x000D_
}_x000D_
_x000D_
/* just style */_x000D_
body {_x000D_
background: #ddd;_x000D_
margin: 1em auto;_x000D_
}_x000D_
button {_x000D_
display: block;_x000D_
}_x000D_
nav {_x000D_
background: #bbb;_x000D_
margin: 1rem auto;_x000D_
padding: 0.5rem;_x000D_
}_x000D_
li {_x000D_
display: inline-block;_x000D_
width: 40px;_x000D_
height: 20px;_x000D_
border: solid thin #777;_x000D_
margin: 4px;_x000D_
background: #999;_x000D_
text-align: center;_x000D_
}
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<button>fix</button>_x000D_
_x000D_
<nav>_x000D_
<ul>_x000D_
<li>3</li>_x000D_
<li>.</li>_x000D_
<li>1</li>_x000D_
<li>4</li>_x000D_
</ul>_x000D_
</nav>_x000D_
_x000D_
<nav>_x000D_
<ul>_x000D_
<li>3</li>_x000D_
<li>.</li>_x000D_
<li>1</li>_x000D_
<li>4</li>_x000D_
<li>1</li>_x000D_
<li>5</li>_x000D_
<li>9</li>_x000D_
<li>2</li>_x000D_
<li>6</li>_x000D_
<li>5</li>_x000D_
<li>3</li>_x000D_
<li>5</li>_x000D_
</ul>_x000D_
</nav>
_x000D_
I've a span
inside a div
and just setting margin: auto
to the container div
worked for me.
You can do it simply by using display: inline;
(or white-space: nowrap;
).
I hope you find this useful.
The solution is to set your div
to display: inline-block
.
Just put a style into your CSS file
div {
width: fit-content;
}
This seems to work fine for me on all browsers. Example is an actual ad i use online and in newsletter. Just change the content of the div. It will adjust and shrinkwrap with the amount of padding you specify.
<div style="float:left; border: 3px ridge red; background: aqua; padding:12px">
<font color=red size=4>Need to fix a birth certificate? Learn <a href="http://www.example.com">Photoshop in a Day</a>!
</font>
</div>
display: inline-block
adds an extra margin to your element.
I would recommend this:
#element {
display: table; /* IE8+ and all other modern browsers */
}
Bonus: You can also now easily center that fancy new #element
just by adding margin: 0 auto
.
You can try this code. Follow the code in the CSS section.
div {_x000D_
display: inline-block;_x000D_
padding: 2vw;_x000D_
background-color: green;_x000D_
}_x000D_
_x000D_
table {_x000D_
width: 70vw;_x000D_
background-color: white;_x000D_
}
_x000D_
<div>_x000D_
<table border="colapsed">_x000D_
<tr>_x000D_
<td>Apple</td>_x000D_
<td>Banana</td>_x000D_
<td>Strawberry</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Apple</td>_x000D_
<td>Banana</td>_x000D_
<td>Strawberry</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Apple</td>_x000D_
<td>Banana</td>_x000D_
<td>Strawberry</td>_x000D_
</tr>_x000D_
_x000D_
</table>_x000D_
</div>
_x000D_
An working demo is here-
.floating-box {_x000D_
display:-moz-inline-stack;_x000D_
display: inline-block;_x000D_
_x000D_
width: fit-content; _x000D_
height: fit-content;_x000D_
_x000D_
width: 150px;_x000D_
height: 75px;_x000D_
margin: 10px;_x000D_
border: 3px solid #73AD21; _x000D_
}
_x000D_
<h2>The Way is using inline-block</h2>_x000D_
_x000D_
Supporting elements are also added in CSS._x000D_
_x000D_
<div>_x000D_
<div class="floating-box">Floating box</div>_x000D_
<div class="floating-box">Floating box</div>_x000D_
<div class="floating-box">Floating box</div>_x000D_
<div class="floating-box">Floating box</div>_x000D_
<div class="floating-box">Floating box</div>_x000D_
<div class="floating-box">Floating box</div>_x000D_
<div class="floating-box">Floating box</div>_x000D_
<div class="floating-box">Floating box</div>_x000D_
</div>
_x000D_
You want a block element that has what CSS calls shrink-to-fit width and the spec does not provide a blessed way to get such a thing. In CSS2, shrink-to-fit is not a goal, but means to deal with a situation where browser "has to" get a width out of thin air. Those situations are:
when there are no width specified. I heard they think of adding what you want in CSS3. For now, make do with one of the above.
The decision not to expose the feature directly may seem strange, but there is a good reason. It is expensive. Shrink-to-fit means formatting at least twice: you cannot start formatting an element until you know its width, and you cannot calculate the width w/o going through entire content. Plus, one does not need shrink-to-fit element as often as one may think. Why do you need extra div around your table? Maybe table caption is all you need.
You can try fit-content
(CSS3):
div {
width: fit-content;
/* To adjust the height as well */
height: fit-content;
}
<div class="parentDiv" style="display:inline-block">
// HTML elements
</div>
This will make parent div width same as the largest element width.
My CSS3 flexbox solution in two flavors: The one on top behaves like a span and the one at the bottom behaves like a div, taking all the width with the help of a wrapper. Their classes are "top", "bottom" and "bottomwrapper" respectively.
body {_x000D_
font-family: sans-serif;_x000D_
}_x000D_
.top {_x000D_
display: -webkit-inline-flex;_x000D_
display: inline-flex;_x000D_
}_x000D_
.top, .bottom {_x000D_
background-color: #3F3;_x000D_
border: 2px solid #FA6;_x000D_
}_x000D_
/* bottomwrapper will take the rest of the width */_x000D_
.bottomwrapper {_x000D_
display: -webkit-flex;_x000D_
display: flex;_x000D_
}_x000D_
table {_x000D_
border-collapse: collapse;_x000D_
}_x000D_
table, th, td {_x000D_
width: 280px;_x000D_
border: 1px solid #666;_x000D_
}_x000D_
th {_x000D_
background-color: #282;_x000D_
color: #FFF;_x000D_
}_x000D_
td {_x000D_
color: #444;_x000D_
}_x000D_
th, td {_x000D_
padding: 0 4px 0 4px;_x000D_
}
_x000D_
Is this_x000D_
<div class="top">_x000D_
<table>_x000D_
<tr>_x000D_
<th>OS</th>_x000D_
<th>Version</th> _x000D_
</tr>_x000D_
<tr>_x000D_
<td>OpenBSD</td>_x000D_
<td>5.7</td> _x000D_
</tr>_x000D_
<tr>_x000D_
<td>Windows</td>_x000D_
<td>Please upgrade to 10!</td> _x000D_
</tr>_x000D_
</table>_x000D_
</div>_x000D_
what you are looking for?_x000D_
<br>_x000D_
Or may be..._x000D_
<div class="bottomwrapper">_x000D_
<div class="bottom">_x000D_
<table>_x000D_
<tr>_x000D_
<th>OS</th>_x000D_
<th>Version</th> _x000D_
</tr>_x000D_
<tr>_x000D_
<td>OpenBSD</td>_x000D_
<td>5.7</td> _x000D_
</tr>_x000D_
<tr>_x000D_
<td>Windows</td>_x000D_
<td>Please upgrade to 10!</td> _x000D_
</tr>_x000D_
</table>_x000D_
</div>_x000D_
</div>_x000D_
this is what you are looking for.
_x000D_
You can use inline-block
as @user473598, but beware of older browsers..
/* Your're working with */
display: inline-block;
/* For IE 7 */
zoom: 1;
*display: inline;
/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;
Mozilla doesn’t support inline-block at all, but they have -moz-inline-stack
which is about the same
Some cross-browser around inline-block
display attribute:
https://css-tricks.com/snippets/css/cross-browser-inline-block/
You can see some tests with this attribute in: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
I think using
display: inline-block;
would work, however I'm not sure about the browser compatibility.
Another solution would be to wrap your div
in another div
(if you want to maintain the block behavior):
HTML:
<div>
<div class="yourdiv">
content
</div>
</div>
CSS:
.yourdiv
{
display: inline;
}
You can use height: 100%
and width for your choice. This makes the div not larger than its content.
This has been mentioned in comments and is hard to find in one of the answers so:
If you are using display: flex
for whatever reason, you can instead use:
div {
display: inline-flex;
}
Personnaly, I simply do this :
HTML code:
<div>
<table>
</table>
</div>
CSS code:
div {
display: inline;
}
If you apply a float on your div, it works too but obviously, you need to apply a "clear both" CSS rules at the next HTML element.
You want a block element that has what CSS calls shrink-to-fit width and the spec does not provide a blessed way to get such a thing. In CSS2, shrink-to-fit is not a goal, but means to deal with a situation where browser "has to" get a width out of thin air. Those situations are:
when there are no width specified. I heard they think of adding what you want in CSS3. For now, make do with one of the above.
The decision not to expose the feature directly may seem strange, but there is a good reason. It is expensive. Shrink-to-fit means formatting at least twice: you cannot start formatting an element until you know its width, and you cannot calculate the width w/o going through entire content. Plus, one does not need shrink-to-fit element as often as one may think. Why do you need extra div around your table? Maybe table caption is all you need.
You could use display: flex
for parent element
#parentElement {
display: flex;
flex-direction: column;
align-items: flex-start;
}
What works for me is:
display: table;
in the div
. (Tested on Firefox and Google Chrome).
A CSS2 compatible solution is to use:
.my-div
{
min-width: 100px;
}
You can also float your div which will force it as small as possible, but you'll need to use a clearfix if anything inside your div is floating:
.my-div
{
float: left;
}
I tried div.classname{display:table-cell;}
and it worked!
width:1px;
white-space: nowrap;
works fine for me :)
Revised (works if you have multiple children): You can use jQuery (Look at the JSFiddle link)
var d= $('div');
var w;
d.children().each(function(){
w = w + $(this).outerWidth();
d.css('width', w + 'px')
});
Do not forget to include the jQuery...
This has been mentioned in comments and is hard to find in one of the answers so:
If you are using display: flex
for whatever reason, you can instead use:
div {
display: inline-flex;
}
An working demo is here-
.floating-box {_x000D_
display:-moz-inline-stack;_x000D_
display: inline-block;_x000D_
_x000D_
width: fit-content; _x000D_
height: fit-content;_x000D_
_x000D_
width: 150px;_x000D_
height: 75px;_x000D_
margin: 10px;_x000D_
border: 3px solid #73AD21; _x000D_
}
_x000D_
<h2>The Way is using inline-block</h2>_x000D_
_x000D_
Supporting elements are also added in CSS._x000D_
_x000D_
<div>_x000D_
<div class="floating-box">Floating box</div>_x000D_
<div class="floating-box">Floating box</div>_x000D_
<div class="floating-box">Floating box</div>_x000D_
<div class="floating-box">Floating box</div>_x000D_
<div class="floating-box">Floating box</div>_x000D_
<div class="floating-box">Floating box</div>_x000D_
<div class="floating-box">Floating box</div>_x000D_
<div class="floating-box">Floating box</div>_x000D_
</div>
_x000D_
Not knowing in what context this will appear, but I believe the CSS-style property float
either left
or right
will have this effect. On the other hand, it'll have other side effects as well, such as allowing text to float around it.
Please correct me if I'm wrong though, I'm not 100% sure, and currently can't test it myself.
I tried div.classname{display:table-cell;}
and it worked!
Source: Stackoverflow.com