Web

How to Make a Div Not Larger Than Its Contents

Learn CSS techniques to make a div fit its content width, like inline-block, display: table, or width: fit-content. Perfect for wrapping tables without expanding. Includes browser support and examples.

1 answer• 6 views

How can I make a div not larger than its contents?

I have a layout similar to:

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

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

To make a div only as wide as its contents, make the div a shrink‑to‑fit container: use display: inline-block, display: table, or width: fit-content (use inline‑block as a broad fallback). If the child is a table, remove any width: 100% on the table and tweak table-layout / white-space so the table’s intrinsic width is what the wrapper will track.

Contents

Make a div fit its content — why divs expand

A plain <div> is a block-level box and, by default, its computed width fills its containing block (the parent), so the wrapper will usually be wider than the table inside. Want the wrapper to wrap the table instead? You need to change the wrapper’s layout mode so the browser uses a shrink‑to‑fit algorithm rather than the default “fill available width” behavior.

Shrink‑to‑fit behavior is produced by things like display: inline-block, display: table, floats or intrinsic sizing (width: fit-content), so switching the wrapper to one of those modes makes the div only as wide as the table’s intrinsic width.

Quick fixes to make a div fit content (inline-block / fit-content / table)

Here are the simplest, battle‑tested options (each works without JavaScript).

  1. display: inline-block — simple and compatible
css
.wrapper { display: inline-block; vertical-align: top; /* optional */ }
  • Pros: Widely supported, keeps element in normal flow (no clearing required), easy to center with text-align:center on parent.
  • Tip: If you see a tiny gap (inline whitespace) between inline-blocks, that’s normal; remove the space in HTML or collapse it with CSS.
  1. width: fit-content — explicit intrinsic sizing (modern browsers)
css
.wrapper {
 /* fallback first, then modern property */
 display: inline-block; /* fallback for older browsers */
 width: fit-content; /* modern */
 width: -webkit-fit-content; /* optional older WebKit */
 width: -moz-fit-content; /* optional older Firefox */
}
  1. display: table — behaves like a table and shrinks to its contents
css
.wrapper { display: table; }
  • Pros: No inline whitespace issues; reliable shrink behavior.
  • Cons: Changes CSS box behavior (table formatting context), which might interact with children differently.
  1. float-based shrink (less recommended)
css
.wrapper { float: left; } /* requires clearing if you need normal flow */
  • Pros: Shrinks to content.
  • Cons: Removes element from normal flow — you likely need a clearing strategy.

For most cases use display:inline-block (fast, compatible) or width:fit-content (clean, modern) with a fallback.

If the child is a table — sizing & table-specific tips

Tables have their own sizing rules. If your table or CSS forces it to expand, the wrapper can’t shrink below the table’s width.

  • Remove forced full widths: make sure you don’t have table { width: 100%; } or a width="100%" attribute. If the table is 100% wide, the wrapper will be full width too.
  • Let the table size itself: table { width: auto; table-layout: auto; } so columns are sized by content.
  • Control wrapping in cells: use td { white-space: nowrap; } to prevent wrapping (which increases width), or allow wrapping to let the table get narrower if that’s acceptable.
  • If you need a single column to take remaining space, combine table-layout: fixed with percentage widths on other cells (see related table sizing techniques on Stack Overflow: https://stackoverflow.com/questions/30228771/how-to-get-the-td-in-html-tables-to-fit-content-and-let-a-specific-td-fill).

Also check any CSS reset or framework styles — some frameworks set tables to width:100% by default.

Browser support & fallbacks

  • display: inline-block — wide support on modern and older browsers; safe fallback.
  • display: table — well supported by modern browsers.
  • width: fit-content — supported in current Chrome, Firefox, Edge and Safari; not supported in legacy IE. See MDN for specifics: https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content

Suggested progressive CSS pattern:

css
.wrapper {
 display: inline-block; /* safe fallback */
 width: -moz-fit-content; /* older Firefox */
 width: -webkit-fit-content; /* older WebKit */
 width: fit-content; /* modern */
}

If you must support very old IE, use display:inline-block and, if necessary, the old IE hack display:inline; zoom:1; on the wrapper (rare today).

Examples & copy‑paste code

  1. Minimal inline-block (centered)
html
<div style="text-align:center;">
 <div class="wrapper-inline">
 <table>
 <tr><td>Short</td><td>Cells</td></tr>
 </table>
 </div>
</div>

<style>
.wrapper-inline { display: inline-block; vertical-align: top; border:1px solid #ddd; padding:6px; }
</style>
  1. fit-content with fallback
html
<div class="wrapper-fit">
 <table>...</table>
</div>

<style>
.wrapper-fit {
 display: inline-block; /* fallback */
 width: -moz-fit-content;
 width: -webkit-fit-content;
 width: fit-content; /* modern */
 border:1px solid #ddd; padding:6px;
}
</style>
  1. display:table (no inline gaps)
html
<div class="wrapper-table">
 <table>...</table>
</div>

<style>
.wrapper-table { display: table; border:1px solid #ddd; padding:6px; }
</style>
  1. What to avoid
  • If you have table { width:100% } the wrapper won’t shrink. Remove that rule if you want shrink behavior.

Sources

  1. https://stackoverflow.com/questions/450903/how-can-i-make-a-div-not-larger-than-its-contents
  2. https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content
  3. https://www.hostm.com/how-to/css/set-div-width-to-content
  4. https://www.geeksforgeeks.org/css/how-to-set-div-width-to-fit-content-using-css/
  5. https://www.tutorialspoint.com/how-to-set-div-width-to-fit-content-using-css
  6. https://fixedbugs.io/css/how-to-div-fit-content
  7. https://www.tutorialrepublic.com/faq/how-to-make-a-div-not-larger-than-its-contents-using-css.php
  8. https://www.w3docs.com/snippets/css/how-to-make-a-div-not-larger-than-its-contents.html
  9. https://css-tricks.com/forums/topic/container-div-needs-to-fit-width-of-child-table-with-dynamic-td-elements/
  10. https://stackoverflow.com/questions/30228771/how-to-get-the-td-in-html-tables-to-fit-content-and-let-a-specific-td-fill
  11. https://fjolt.com/article/css-make-element-width-of-contents
  12. https://www.anycodings.com/1questions/2994241/how-can-i-make-a-div-not-larger-than-its-contents

Conclusion

To make a div fit its content, switch the wrapper to a shrink‑to‑fit mode — display:inline-block or display:table, or use width: fit-content with an inline‑block fallback. Double‑check that the table itself isn’t forced to full width (no width:100%) and tweak table-layout / white-space if cell contents are driving unexpected width.

Authors
NeuroAnswers
Author
Verified by moderation
NeuroAnswers
Moderation
How to Make a Div Not Larger Than Its Contents