How Automatically Adjust Div's Width Using CSS

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

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

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

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.

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>

How to auto adjust the div height according to content in it?

Try with the following mark-up instead of directly specifying height:

.box-centerside {  background: url("../images/greybox-center-bg1.jpg") repeat-x scroll center top transparent;  float: left;  min-height: 100px;  width: 260px;}

<div class="box-centerside">  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br></div>

---

Related Topics