How to make div not larger than its contents?

    |
  • Added:
  • |
  • In: Wordpress

I have a layout similar to:

<div> <table> </table> </div> 

I would like for the div to only expand to as wide as my table becomes.

This Question Has 30 Answeres | Orginal Question | George Snider

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; 

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 { display: inline-block; }
<div> <table> <tr> <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> <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> <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> </tr> </table> </div>

div{ width:auto; height:auto; } 

There are two better solutions

  1. display: inline-block;

    OR

  2. display: table;

Out of these two display:table; is better.

For display:inline-block; you can use the negative margin method to fix the extra space

width:1px; white-space: nowrap; 

works fine for me :)

display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; 

Foo Hack – Cross Browser Support for inline-block Styling (2007-11-19).

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 */ 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/

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...

See the JSfiddle here

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.

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> 

An working demo is here-

.floating-box { display:-moz-inline-stack; display: inline-block; width: fit-content; height: fit-content; width: 150px; height: 75px; margin: 10px; border: 3px solid #73AD21; }
<h2>The Way is using inline-block</h2> Supporting elements are also added in CSS. <div> <div class="floating-box">Floating box</div> <div class="floating-box">Floating box</div> <div class="floating-box">Floating box</div> <div class="floating-box">Floating box</div> <div class="floating-box">Floating box</div> <div class="floating-box">Floating box</div> <div class="floating-box">Floating box</div> <div class="floating-box">Floating box</div> </div>

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; } 

I tried div.classname{display:table-cell;} and it worked!

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:

  • float
  • absolutely positioned element
  • inline-block element
  • table element

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.

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.

<div class="parentDiv" style="display:inline-block"> // HTML elements </div> 

This will make parent div width same as the largest element width.

You can do it simply by using display: inline; (or white-space: nowrap;).

I hope you find this useful.

display: inline-block adds an extra margin to your element.

I would recommend this:

#element { display: table; /* IE8+ and all other modern browsers */ } 

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.

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(){ $('nav ul').each(function(){ $parent = $(this).parent(); $parent.width( $(this).width() ); }); });
nav { display: inline-block; text-align: left; /* doesn't do anything, unlike some might guess */ } ul { display: inline; } /* needed style */ ul { padding: 0; } body { width: 420px; } /* just style */ body { background: #ddd; margin: 1em auto; } button { display: block; } nav { background: #bbb; margin: 1rem auto; padding: 0.5rem; } li { display: inline-block; width: 40px; height: 20px; border: solid thin #777; margin: 4px; background: #999; text-align: center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>fix</button> <nav> <ul> <li>3</li> <li>.</li> <li>1</li> <li>4</li> </ul> </nav> <nav> <ul> <li>3</li> <li>.</li> <li>1</li> <li>4</li> <li>1</li> <li>5</li> <li>9</li> <li>2</li> <li>6</li> <li>5</li> <li>3</li> <li>5</li> </ul> </nav>

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.

The solution is to set your div to display: inline-block.

<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. =)

Try display-inline block. For it to be cross browser compatible please use the below css code

div { display: inline-block; display:-moz-inline-stack; zoom:1; *display:inline; border-style: solid; border-color: #0000ff; }
<div> <table> <tr> <td>Column1</td> <td>Column2</td> <td>Column3</td> </tr> </table> </div>

You can try fit-content (CSS3):

div { width: fit-content; /* To adjust the height as well */ height: fit-content; } 

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 { font-family: sans-serif; } .top { display: -webkit-inline-flex; display: inline-flex; } .top, .bottom { background-color: #3F3; border: 2px solid #FA6; } /* bottomwrapper will take the rest of the width */ .bottomwrapper { display: -webkit-flex; display: flex; } table { border-collapse: collapse; } table, th, td { width: 280px; border: 1px solid #666; } th { background-color: #282; color: #FFF; } td { color: #444; } th, td { padding: 0 4px 0 4px; }
Is this <div class="top"> <table> <tr> <th>OS</th> <th>Version</th> </tr> <tr> <td>OpenBSD</td> <td>5.7</td> </tr> <tr> <td>Windows</td> <td>Please upgrade to 10!</td> </tr> </table> </div> what you are looking for? <br> Or may be... <div class="bottomwrapper"> <div class="bottom"> <table> <tr> <th>OS</th> <th>Version</th> </tr> <tr> <td>OpenBSD</td> <td>5.7</td> </tr> <tr> <td>Windows</td> <td>Please upgrade to 10!</td> </tr> </table> </div> </div> this is what you are looking for.

What works for me is:

display: table; 

in the div. (Tested on Firefox and Google Chrome).

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.

Simply

<div style="display: inline;"> <table> </table> </div> 

I would just set padding: -whateverYouWantpx;


Search
I am...

Sajjad Hossain

I have five years of experience in web development sector. I love to do amazing projects and share my knowledge with all.

NEED HOSTING?
Are you searching for Good Quality hosting?
You can Try It!
Connect Social With PHPAns
Top