How to Let a Div Automatically Set It Own Width

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

HTML div auto width

You are not closing off the first and last div within the container. You need that. I made a jsFiddle, I think it is what you need. Here is the code:

<style>
div {
    width: auto;
    height: 25px;
    position: relative;
    float: right;
}
div div {
    float: left;
    display:inline-block;

}
div div:first-child {
    float: left;
    width: 25px;
}
div div:last-child {
    width: 25px;
    float: right;
}
</style>

<div>
<div>1</div>
<div>This is the second and middle div.</div>
<div>3</div>
</div>

inline divs that adjust width automatically

Just remove float:right from #dynamic:

JS Bin demo

---

To evenly distribute the menu items, do this:

#dynamic
{
    background-color:#CF0; /* Just to differentiate DIV */
    display:table;
    width: 100%;
}

.menus
{
    display:table-cell;
    text-align:center;
}

JS Bin demo: http://jsbin.com/emulux/2

---

A third installment...

Set a percentage width on the static div like 20% and set 80% to the dynamic div:

#static
{
    float:left;
    background-color:#930; /* Just to differentiate DIV */
    width: 20%;
}

#dynamic
{
    background-color:#CF0; /* Just to differentiate DIV */
    display:table;
    width: 80%;
}

.menus
{
    display:table-cell;
    text-align:center;
}

JS Bin demo

How to adjust middle div width automatically?

You just have to change:

<div style="width:auto; height:60px; background-color:blue;">

To

<div style="margin: 0 50px; height:60px; background-color:blue;">

And it will work as you expected.

Fiddle: http://jsfiddle.net/o0twxh5j/

Hope this helps

position div with auto width left of screen

• Don't use jQuery
• Use CSS and transform translate, and transition for the desired animation
• Use JavaScript to Element.classList.toggle() a desired CSS class — that will transition the element from left -100% (of its own width) to left 0%.
• use a <button type="button"> if you actually need a button. Anchors are for something else (Navigation).

const EL = (sel, par) => (par||document).querySelector(sel);

EL("#toggle").addEventListener("click", () => {
  EL("#menu").classList.toggle("is-open");
});

/* QuickReset */
* {
  margin: 0;
  box-sizing: border-box;
}

#toggle {
  position: fixed;
  right: 0;
  padding: 1rem;
  /* hopefully you know how to style a Button */
}

#menu {
  position: fixed;
  padding: 30px;
  width: calc(100vw - 100px); /* or whatever you want, does not matters */
  height: 100vh;
  background: gold;
  transition: transform 0.5s; /* transition property and duration */
  transform: translateX(-100%); /* -100% of self-width (hidden) */
}

#menu.is-open {
  transform: translateX(0%); /* (visible) */
}

<div id="menu">I am something that actually toggles</div>

<button type="button" id="toggle">Toggle</button>

Div Size Automatically size of content

As far as I know, display: inline-block is what you probably need. That will make it seem like it's sort of inline but still allow you to use things like margins and such.

Divs side by side, width auto adjust

Try this fiddle

If you need to use position fixed (really I didn't understand why) you could use percentage for main div, and pixels for sidebars.

In main div to set the width use this:

width: calc(100% - 400px);
Where 400px is the sum of the width of your both sidebars

HTML

 <div clas="container">
  <div class="top">top</div>
  <div class="left">left</div>
  <div class="main">main</div>
  <div class="right">right</div>
</div>

CSS

.container {width: 100%; height: 100%;}
.top {
  position: fixed;
  clear: both;
  width: 100%;
  height: 20%;
  background-color: #d5d5d5;
}

.left {
  position: fixed;
  top: 20%;
  width: 40px;
  float: left;
  height: 80%;
  background-color: green;
}
.main {
  width: calc(100% - 80px);
  height: 80%;
  position: fixed;
  top: 20%;
  left: 40px;
  background-color: grey;

}
.right {
  width: 40px;
  height: 80%;
  position: fixed;
  top: 20%;
  right: 0;
  background-color: green;
}

CSS div auto size to contents, with max width and elipsis text

fit-content() need to be used with value (https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content). Without it's invalid.

By the way you don't need it and you can update your code like below. I will rely on flexbox to make it easier since you want to have all the elements in the same row next to each other.

.component-body-inputs {  max-width: 200px;  display:inline-block; /* to fit the content width OR display:table to keep the block level behavior */  background-color: yellow;    white-space: nowrap;}

.component-body-inputs>div {  /*overflow: hidden; not needed here*/  border-top: solid 1px black;  display:flex; /* added this */}
.component-body-inputs>div>img {  width: 1em;  height: 1em;}
.component-body-inputs>div>div {  /*display: inline-block; not needed*/  text-overflow: ellipsis;   overflow: hidden; /*needed here*/
}
.component-body-inputs>div:hover {  background-color: lightgray;}

<div class="component-body-inputs">    <div>      <img style="padding-left:0em" src="Icon.png" />      <div>Item1</div>    </div>
    <div>      <img style="padding-left:1em" src="Ico.pngn" />      <div>Item1</div>    </div>
    <div>      <img style="padding-left:2em" src="icon.png" />      <div>Item1hshksdh fh sdfjhsjkdfhs fsd</div>    </div>
    <div>      <img style="padding-left:2em" src="icon.png" />      <div>Item1</div>    </div>
  </div>

---

Related Topics